Как установить активную вкладку в (Angular Material Design) в Angular 6

Question

Я знаю, что я не новичок, чтобы спросить об этом, но я не смог найти никакого решения для этого.

У меня есть элемент управления вкладкой материала в одном из компонентов. Но он не показывает активную вкладку, пока янажмите на любую вкладку на странице.

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}
                        ];

Answer 1

Это потому, что вы, вероятно, не находитесь на одном из маршрутов, как указано во втором фрагменте кода.

Вы можете либо:

• Перенаправить все маршруты на одиниз указанных вами путей:

  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>' }
  ]
  

Answer 2

Мне очень трудно активно отлаживать его для вас, если вы не можете воспроизвести проблему на 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}
];