使用多个 在角7

问题描述 投票:0回答:1

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

''=>布局页面'home => home'这个有另一个路由器插座来切换视图的详细信息/:id'/ home的子节点,将由第二个路由器插座呈现

我的路由模块.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>

我在这里缺少什么?,在此先感谢:)

angular routing angular2-routing angular7
1个回答
3
投票

弄清楚了

因为我在一个模块中有所有组件,即我的所有组件都是彼此的兄弟,所以我不需要添加另一个名为<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 },
    ] },
];
© www.soinside.com 2019 - 2024. All rights reserved.