选项卡中的角度子路由未显示在活动选项卡中答案

【问题标题】：Angular Child Routing in Tabs not showing in active tab选项卡中的角度子路由未显示在活动选项卡中
【发布时间】：2018-12-05 19:30:34
【问题描述】：

您好，我正在使用角度选项卡来路由我的应用程序，并且我有一些子路由。第二个选项卡有两个子路由。当我切换到第二个子路由时，选项卡状态从活动变为无。我不知道我可能会出错。到目前为止我的代码如下：

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>

下面的屏幕截图显示，使用产品路线时很好，但是当我尝试路由到保修路线时，选项卡状态变为。有什么想法吗？

【问题讨论】：

你的warranty路由在哪里定义？
@SunilSingh 抱歉我已经编辑了上面的代码。

标签： angular routing parent-child

【解决方案1】：

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

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

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

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

例如：这里的默认组件是ProductComponent

 children: [

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

【讨论】：

这不起作用，它只是删除了所有选项卡上的活动状态
答案中提到的导航链接的更改。