导航子路线 Angular

Question

我有应用程序路由（对于 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 },
    ] 
  }

和 LayoutComponent

<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

Answer 1

您尝试过这样的符号 [routerLink]="['/user/bob']" 吗？

https://angular.io/api/router/RouterLink

Answer 2

ShowManufacturerComponent 配置有子路由。

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

导航子路线 Angular

Navigate child route Angular

angular-routing

angular

angular-router