如何在 mat-tab 中启用 routerLink答案

【问题标题】：how to enable routerLink in mat-tab如何在 mat-tab 中启用 routerLink
【发布时间】：2019-03-28 07:38:09
【问题描述】：

我懒惰地从 app-routing.module.ts 加载功能模块，如 Routing.module.ts 所示。特色路由模块中的默认路由加载包含 3 个子路由的 LccpTrackerComponent。 LccpTrackerComponent 的模板使用 Angular Material 选项卡组件。我正在尝试在 mat-tab 标题中添加 routerLink 指令以路由到相应的子组件，但该路由不会触发。有谁知道如何使这项工作？谢谢。

模板

<article>
  <section>
    <mat-tab-group>
      <mat-tab label="Consults"><a routerLink="consults" /></mat-tab>
      <mat-tab label="Screening"><a routerLink="screening" /></mat-tab>
      <mat-tab label="Noduled"><a routerLink="noduled" /></mat-tab>
    </mat-tab-group>
  </section>
  <router-outlet></router-outlet>
</article>

Routing.module.ts

const routes: Routes = [{
  path: '',
  component: LccpTrackerComponent,
  children: [{
      path: 'consults',
      component: ConsultComponent,
      pathMatch: 'full',
      resolve: {
        consultSummary: LccpResolver
      }
    },
    {
      path: 'screening',
      component: ScreeningComponent,
      pathMatch: 'full',
      resolve: {
        enrolledSummary: ScreeningResolver
      }
    },
    {
      path: 'noduled',
      component: NoduledComponent,
      pathMatch: 'full',
      resolve: {
        noduledSummary: NoduledResolver
      }
    }
  ]
}, ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LccpRoutingModule {}

【问题讨论】：

标签： angular

【解决方案1】：

就我而言，使用<a [routerLink]="['/LinkPath']"> 就可以了。

但我也建议你可以使用页面标签作为路由，因为你已经定义选择器，

like path: 'consults' -> 使用<consults></consults>

例如：

<mat-tab-group>
   <mat-tab label="Consults"><consults</consults>></mat-tab>
   <mat-tab label="Screening"><screening></screening></mat-tab>
   <mat-tab label="Noduled"><noduled></noduled></mat-tab>
</mat-tab-group>

此外，如果您担心负载，您可以使用[selectIndex] 方法（可能与您的材料版本不同）达到同样的目的。

【讨论】：

【解决方案2】：

使用<nav mat-tab-nav-bar>，来自docs：

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

<router-outlet></router-outlet>

【讨论】：