多个命名的路由器 – 出口角2

我想通过儿童路线显示不同的视图.例如,我想让我的模板持有多个路由器插座

版本:@ angular / router“:”3.0.0-alpha.7“

<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>

在我的路由器中,我想指定路由器的名称.

正如我在一个问题中看到的,解决方案是指定AuxRoute,但AuxRoute在此版本中不存在.

{path: '/',        component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})

虽然在角度2的官方网站,我发现有可能有多个路由器,但我找不到任何资源.

https://angular.io/docs/ts/latest/guide/router.html

模板可以容纳一个未命名的<路由器 - 出口>.路由器支持多个命名插座,这是我们将来介绍的功能.

当前版本多命名的路由器插座(对于angular2 RC.6 ^)看起来像这样:

路由器配置

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>

和根组件的导航示例:

constructor(router: Router) {
  router.navigateByUrl('/home/(route1:page1//route2:page2//route3:page3)');
}

替代方法:

<a [routerLink]="['/home', { outlets: {'route1':['page1'],'route2': ['page2'] }}]"></a>

这是Plunker Example

也可以看看

> Named Router Outlets in Angular 2

相关文章
相关标签/搜索