Question

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

''=>布局页面 'home => home'（这是另一个路由器出口，用于切换视图） / home的'details /：id'子级，将由第二个路由器出口呈现

我的路由模块.ts

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

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

Parent-component.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>

我在这里想念的是什么？，在此先感谢：）

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

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

1 个答案: