Angular 2-子模块路由和嵌套<router-outlet>
Angular 2-子模块路由和嵌套<router-outlet>
提问于 2017-01-26 01:27:17
我正在寻找一个使用Angular 2的解决方案，用于下面解释的场景：
在这个场景中，top-nav包含加载子模块的链接，sub包含更新子模块内容的链接。
URL应映射为：
- /home =>加载主组件路由器中的主页outlet
- /submodule =>加载主组件路由器插座中的子模块，默认情况下应显示子模块的主页，子navbar
- /submodule/feature =>加载子模块的路由器插座
中的功能
app模块(和app组件)包含一个顶部导航栏，用于导航到不同的子模块，app组件模板可能如下所示
<top-navbar></top-navbar>
<router-outlet></router-outlet>但这就是复杂性所在。我需要我的子模块有一个类似的布局与第二级导航栏和自己的路由器插座，以加载自己的组件。
<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>我尝试了每一个选项，到处寻找，但找不到一个解决方案，在带有路由器插座的子模块中有一个默认模板(如应用程序组件)，并在内部路由器插座中加载子模块的内容，而不丢失子导航。
我将非常感谢您的任何意见或想法
回答 3
Stack Overflow用户
发布于 2017-01-26 02:48:30
html页面将如下所示。
主页
<top-navbar></top-navbar>
<router-outlet></router-outlet>子模块页面
<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>点击顶部导航栏中的导航，主线出口将分别进行路线选择。
当单击子导航栏时，路由器-插座子将分别路由。
超文本标记语言很好，诀窍在于编写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
}
]希望能对你有所帮助。
Stack Overflow用户
发布于 2018-03-02 01:19:43
使用：
RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"完整示例：
HTML
<div class="tabs tinyscroll">
<button *ngFor="let tab of tabs"
[routerLink]="[{ outlets: { sub: [tab.name] } }]"
routerLinkActive="selected">
<span>{{ tab.label }}</span>
</button>
</div>
<section>
<router-outlet name="sub"></router-outlet>
</section>app.module.ts
imports: [
...
RouterModule.forChild([
{
path: 'registers',
component: RegistersComponent,
children: [
{path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
{path: 'drivers', component: DriversComponent, outlet: 'sub'},
{path: 'bases', component: BasesComponent, outlet: 'sub'},
{path: 'lines', component: LinesComponent, outlet: 'sub'},
{path: 'users', component: UsersComponent, outlet: 'sub'},
{path: 'config', component: ConfigComponent, outlet: 'sub'},
{path: 'companies', component: CompaniesComponent, outlet: 'sub'}
],
canActivate: [AuthGuard]
}
]),
...Stack Overflow用户
发布于 2017-10-26 13:04:25
您必须在路由中提及插座名称在路由中提及您的路由器插座名称，如" outlet :'sub“
routes: Routes = [
{path:'', redirectTo: 'login', pathMatch: 'full'},
{
path: 'login',
component: LoginComponent,
},
{ path: 'home',
component: AppComponent,
children: [
{path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
{path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
]
},
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41857876
复制相关文章
相似问题
腾讯云开发者
