时间戳

首页 > 解决方案 > 导航子路由Angular

angular - 导航子路由Angular

问题描述

我有 app-routing (for root)

  { path: 'login', component: LoginComponent },
  { path: 'swagger', component: SwaggerComponent },
  { path: '**', component: PageNotFoundComponent}

我创建了其他路由器插座（为孩子）

  { path: '', 
    component: LayoutComponent,
    children: [
      {
        path: 'manufacturers',
        component: ShowManufacturerComponent,       
        children: [
          {
            path: 'add',
            component: AddComponent,
          },
          {
            path: 'edit/:id',
            component: EditComponent,
          },
        ]
      },
      { path: 'products', component: ShowProductComponent },
      { path: 'categories', component: ShowCategoryComponent },
    ] 
  }

和布局组件

<header></header>
<sidebar></sidebar>
<router-outlet></router-outlet>
<footer></footer>

现在这是路由器树

AppComp
  --PageNotFoundComp
  --SwaggerComp
  --LoginComp
  --LayoutComp
      --ShowManufacturerComp
          --AddComp
          --EditComp
      --ShowCategoriesComp
....

当我使用

<a routerLink="add">Add</a>

或者

<a routerLink="/manufacturers/add">Add</a>

只有 ShowManufacturersComp 显示。如何解决这个问题，tks

标签： angularangular-routingangular-router

解决方案

ShowManufacturerComponent配置为具有子路由。

在组件模板中，您需要包含一个router-outlet.

推荐阅读