多个命名的路由器插座角度 2 [英] Multiple named router-outlet angular 2
问题描述
我想通过子路由显示不同的视图.例如,我希望我的模板可以容纳多个路由器插座
I want to display different views by child routes. For Example I want my template to hold multiple router-outlet
版本:@angular/router": "3.0.0-alpha.7"
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
在我的路由器中,我想指定路由器的名称.
In my router i want to specify the name of router.
正如我在一个问题中看到的,解决方案是指定 AuxRoute,但此版本中不存在 AuxRoute.
As i saw in a question, the solution for this is to specify AuxRoute, but AuxRoute does not exist in this version.
{path: '/', component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})
虽然在 angular 2 官方网站上我发现可以有多个路由器,但我找不到任何资源.
While on angular 2 official website i found that it is possible to have multiple router, but i can't find any resource.
https://angular.io/docs/ts/latest/guide/路由器.html
一个模板可能只包含一个未命名的
推荐答案
Current version multiple-named router-outlet
(for angular2 RC.6^) 看起来像这样:
Current version multiple-named router-outlet
(for angular2 RC.6^) looks like this:
路由器配置
const appRoutes: Routes = [{
path: 'home',
component: HomeComponent,
children: [
{ path: '', component: LayoutComponent },
{ path: 'page1', component: Page1Component, outlet: 'route1' },
{ path: 'page2', component: Page2Component, outlet: 'route2' },
{ path: 'page3', component: Page3Component, outlet: 'route3' }
]
}, {
path: 'articles',
component: ArticlesComponent,
children: [
{ path: '', component: LayoutComponent },
{ path: 'article1', component: Article1Component, outlet: 'route1' },
{ path: 'article2', component: Article2Component, outlet: 'route2' }
]
}, {
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
模板在主页组件中:
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
<router-outlet name="route3"></router-outlet>
以及来自根组件的导航示例:
And a navigation example from root component:
constructor(router: Router) {
router.navigateByUrl('/home/(route1:page1//route2:page2//route3:page3)');
}
替代方式:
<a [routerLink]="['/home', { outlets: {'route1':['page1'],'route2': ['page2'] }}]"></a>
这里是 Plunker 示例
另见
这篇关于多个命名的路由器插座角度 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!