Angular 4 ^:如何在一个组件中拥有多个子组件，而每个子组件都针对自己的路由器出口 [英] Angular 4^ : How to have more than one child of a component with each child targeting its own router outlet

问题描述

截至该问题为止

As of this question How to group angular components with a root component like how the App-Component works , I have children being loaded into the main router-outlet, is there a way to have more than one child load at a time, and each being inserted into its own special outlet?

赞:

父视图

<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
    ]
},

推荐答案

我相信您可以使用命名的出口:

I believe you can use a named outlet:

<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

这篇关于Angular 4 ^:如何在一个组件中拥有多个子组件，而每个子组件都针对自己的路由器出口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！