Angular 4 ^:如何让一个组件的多个子节点与每个子节点定位其自己的路由器插座

时间:2018-04-14 12:46:27

标签: angular typescript

从这个问题How to group angular components with a root component like how the App-Component works开始,我有孩子被装入主路由器插座,有没有办法一次装载一个以上的儿童,每个插入自己的特殊插座?

喜欢:

父视图

<section class="main-parent">
      <router-outlet-child1></router-outlet-child1>
      <router-outlet-child2></router-outlet-child2>
</section>

和路由类似::

{
    path: 'parent-path', component: ParentComponent, children: [
      { path: '', component: Child1Component }, //to first outlet
      { path: '', component: Child2Component }, //to 2nd outlet
    ]
},

1 个答案:

答案 0 :(得分:3)

我相信你可以使用指定的出口:

<router-outlet name="child1"></router-outlet>
<router-outlet name="child2"></router-outlet>

...

{
    path: 'parent-path', component: ParentComponent, children: [
       { path: '', component: Child1Component, outlet: 'child1' }, //to first outlet
       { path: '', component: Child2Component, outlet: 'child2' }, //to 2nd outlet
    ]
}

https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets