在角度 7 中使用多个 <router-outlet>答案

【问题标题】：using multiple <router-outlet> in angular 7在角度 7 中使用多个 <router-outlet>
【发布时间】：2018-12-18 06:17:24
【问题描述】：

我正在尝试如下配置我的路线：

'' => 布局页面 'home => home' 这有另一个路由器插座来切换视图 'details/:id' /home 的子级，将由第二个 router-outlet 呈现

我的路由模块.ts

    [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      component: HomeComponent,
      children: [

        {
          path: 'home/details/:id',
          component: ContactDetailsComponent,
          outlet: 'out2'
        },
       }
     ];

父组件.html

    <some-tags></some-tags>

<router-outlet></router-outlet>

Home-component.html

 <main class="d-flex">
  <app-contact-list></app-contact-list>
  <router-outlet name="out2"></router-outlet>
</main>

我在这里缺少什么？，在此先感谢 :)

【问题讨论】：

标签： angular routing angular2-routing angular7

【解决方案1】：

想通了

因为我在一个模块中拥有所有组件，即我的所有组件都是彼此的兄弟，所以我不需要添加另一个名为 <router-outlet> 的组件，这可以通过单个 <router-outlet> 来完成。

当我从路由中删除出口并使用延迟加载的路由时，以前的路由有效。

修改路线

   const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, children: [
      { path: ':id/details', component: Component2 },
      { path: ':id/update', component: Component3 },
      { path: 'add', component: Component4 },
    ] },
];

【讨论】：