Angular 2 - 子模块路由和嵌套的 <router-outlet> [英] Angular 2 - Submodule routing and nested <router-outlet>
问题描述
我正在为下面解释的场景寻找 Angular 2 的解决方案:
I'm looking for a solution with Angular 2 for the scenario explained below:
在这种情况下,顶部导航包含加载子模块的链接,子导航包含更新子模块内容的链接.
In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.
网址应映射为:
- /home =>在主要组件路由器插座中加载主页
- /子模块 =>在主要组件路由器插座中加载子模块,默认情况下应显示子模块的主页和子导航栏
- /submodule/feature =>在子模块的路由器插座内加载功能
应用模块(和应用组件)包含一个顶部导航栏来导航到不同的子模块,应用组件模板可能如下所示
The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this
<top-navbar></top-navbar>
<router-outlet></router-outlet>
但这就是复杂性.我需要我的子模块具有类似的布局,带有二级导航栏和自己的路由器插座,以加载自己的组件.
But here is the complexity. I need my submodules to have a similar layout with a second level nav bar and their own router outlet to load their own components.
<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>
我尝试了所有选项并到处搜索,但找不到在带有路由器插座的子模块中具有默认模板(如应用程序组件)的解决方案,并且还在内部路由器插座中加载子模块的内容而不会丢失子导航
I tried every option and search everywhere but couldn't find a solution to have a default template (like app component) in the sub-module with router outlet and also load the contents of submodule in the inner router outlet without losing the sub-nav.
我将不胜感激任何意见或想法
I would appreciate any input or ideas
推荐答案
html 页面将如下所示.
The html page will look like this.
主页
<top-navbar></top-navbar>
<router-outlet></router-outlet>
子模块页面
<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>
点击顶部导航栏中的导航,主路由出口将分别路由.
on clicking navigation in top-nav bar the main route outlet will route respectively.
点击子导航栏时,路由器插座 [sub] 将分别路由.
while clicking on sub-navbar the router-outlet [sub] will route respectively.
HTML 很好,诀窍在于编写 app.routing
app.routing.ts
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{ path: 'home',
component: homeComponent,
children: [
{
path: 'module1',
component: module1Component,
children: [
{
path: 'submodule11',
component: submodule11Component,
},
{
path: '',
redirectTo: 'submodule11',
pathMatch: 'full'
}
]
},
{
path: 'module2',
component: module2omponent,
children: [
{
path: 'submodule21',
component: submodule21Component,
},
{
path: '',
redirectTo: 'submodule21',
pathMatch: 'full'
}
]
}
]
},
{
path: 'about',
component: aboutComponent
}
]
希望能帮到你.
更多详情https://angular.io/guide/router
这篇关于Angular 2 - 子模块路由和嵌套的 <router-outlet>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!