选项卡中的角子级路由未在活动选项卡中显示

Question

嗨，我正在使用角度制表符来路由我的应用程序，并且我有一些子路由。第二个选项卡有两个子路径。当我切换到第二条子路由时，选项卡状态从活动变为无。我不知道哪里可能出问题了。到目前为止，我的代码如下：

content.html（用于导航链接）

 <nav mat-tab-nav-bar mat-align-tabs="center">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          {{link.label}}
        </a>
      </nav>

Content.ts

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select/products', label: 'Product'},
    {path: 'client', label: 'Client'},
  ];

app.module.ts

const appRoutes: Routes = [
  { path: 'details', component: DetailsComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'warranty',component: WarrantyComponent },
  { path: 'details',component: CldetailsComponent },
  { path: 'select',component: SelectComponent },
];

RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } 
    ),

RouterModule.forRoot([
     { path: '', redirectTo: 'login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent},
     { 
       path: 'policy', 
       component: PolicyComponent, 
       children: [
        {path: 'details', component: DetailsComponent}, 
        {path: 'select',component: SelectComponent, children: [{path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent},]}, 
        {path: 'client', component: CldetailsComponent},
       ]
    },

路由器链接我用于导航的路径

<a routerLink="/policy/select/products"></a>
<a routerLink="/policy/select/warranty"></a>

以下屏幕截图显示，使用产品路线时可以，但是当我尝试转到保修路线时，选项卡状态消失了。有什么想法吗？

Answer 1

父级导航链接路径存在问题。您应该在导航栏中使用产品和保修的parent路径，以便可以在product和`保修的基础上激活它。

将select/products的路径更改为select，

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select', label: 'Product'}, //<--- changed here
    {path: 'client', label: 'Client'},
  ];

注意：您可能还需要更改select路径的路由配置。在/policy/select路径下，需要呈现的默认组件是什么。

Ex：此处默认组件为ProductComponent

 children: [

        {path: 'select',component: SelectComponent, children: [{path: '', component: ProductsComponent}, {path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent}]}
       ]