Multiple named router-outlet angular 2

浪尽此生 提交于 2019-11-27 04:00:35

Current version multiple-named router-outlet (for angular2 RC.6^) looks like this:

Router configuration

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'
   }
];

Template within Home component:

<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)');
} 

Alternative way:

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

Here's live Plunker Example

See also

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!