我正在寻找Angular 2的解决方案,用于下面解释的场景:
在这种情况下,top-nav包含加载子模块的链接,sub-nav有链接来更新子模块的内容 .
网址应映射为:
-
/ home =>在主组件路由器插座中加载主页
-
/ submodule =>加载主组件路由器插座中的子模块,默认情况下应显示子模块的主页和子导航栏
-
/ submodule / feature =>加载子模块路由器插座内的功能
应用程序模块(和应用程序组件)包含一个导航到不同子模块的顶部导航栏,应用程序组件模板可能如下所示
<top-navbar></top-navbar>
<router-outlet></router-outlet>
但这是复杂性 . 我需要我的子模块与二级导航栏和他们自己的路由器插座具有相似的布局,以加载他们自己的组件 .
<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>
我尝试了所有选项并在任何地方搜索但是找不到具有路由器插座的子模块中的默认模板(如app组件)的解决方案,并且还在内部路由器插座中加载子模块的内容而不会丢失子导航 .
我很感激任何意见或想法
3 回答
html页面看起来像这样 .
Main Page
Sub Module Page
点击顶部导航栏中的导航,主路径出口将分别路由 .
点击子导航栏时,router-outlet [sub]将分别路由 .
HTML is fine, the trick will came at writing app.routing
app.routing.ts
希望它会对你有所帮助 .
更多细节https://angular.io/guide/router
使用:
完整示例:
HTML
app.module.ts
你必须在路线中提到插座名称,在路由中提到你的路由器插座名称,如“outlet:'sub”