如何在Angular 6中的（角度材料设计）中设置活动选项卡答案

【问题标题】：How to set active Tab in (angular Material Design) in Angular 6如何在Angular 6中的（角度材料设计）中设置活动选项卡
【发布时间】：2019-07-11 09:54:01
【问题描述】：

我知道我不是问这个问题的新手，但我找不到任何解决方案。

我在其中一个组件中有一个材质选项卡控件。但是在我单击页面中的任何选项卡之前，它不会显示活动选项卡。

app.component.html

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

app.component.ts

 NavigateTo : Array<object> = [
                         {label:'Employee Master',path:'EmployeeMaster',index:0},
                         {label:'Table Master',path:'TableMaster',index:1}
                        ];

【问题讨论】：

您到底想达到什么目的？当您导航到组件时，您是否希望特定选项卡处于活动状态？
@wentjun 是的，没错
那个特定的选项卡取决于路线，对吧？例如，www.example.com/EmployeeMaster 会将带有EmployeeMaster 的选项卡设置为活动状态？
@wentjun 是的，你是对的

标签： angular typescript angular-material angular6

【解决方案1】：

除非您可以在 stackblitz 上重现该问题，否则我很难主动为您调试它，但这是我的假设：

<nav mat-tab-nav-bar  mat-align-tabs="center" mat-stretch-tabs >
  <a  mat-tab-link *ngFor="let link of NavigateTo" [routerLink]="link.path" (click)="activeLinkIndex = link.index" routerLinkActive #rla="routerLinkActive"
    [active]="activeLinkIndex===link.index">
    {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

以及组件上的以下更改。我只添加了伪代码，但想法是您将路由参数映射到NavigateTo 中的特定索引。此外，您可能需要将/ 添加到您的链接路径：

activeLinkIndex = 0;

.
.
//this.activeLinkIndex = 
// map the current route parameter to this.NavigateTo and get the desired route index
 .
 .
NavigateTo : Array<object> = [
  {label:'Employee Master',path:'/EmployeeMaster',index:0},
  {label:'Table Master',path:'/TableMaster',index:1}
];

【讨论】：

【解决方案2】：

那是因为您可能不在第二个代码 sn-p 中指定的路线之一上。

您可以：

将所有路由重定向到您指定的路径之一：

import { Route } from '@angular/router';
// ...
export const AppRoutes: Route[] = [
  { path: '**', redirectTo: '/<your-path>' }
]

或者设置初始路由重定向到：

import { Route } from '@angular/router';
// ...
export const AppRoutes: Route[] = [
  { path: '', pathMatch: 'full', redirectTo: '/<your-path>' }
]

【讨论】：