在 angular 中使用多个 <router-outlet> 7

Question

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

'' => 布局页面 'home => home' 这有另一个路由器插座可以切换视图 'details/:id' /home 的子节点，将由第二个路由器插座渲染

我的路由-module.ts

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

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

父-component.html

    <some-tags></some-tags>

<router-outlet></router-outlet>

主页-component.html

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

我在这里缺少什么？提前致谢:)

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

在 angular 中使用多个 <router-outlet> 7

using multiple <router-outlet> in angular 7

routing

angular2-routing

angular

angular7