如何在Angular 6中的（Angular材質設計）中設置活動選項卡

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

除非您可以在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}
];

Answer 2

那是因為您可能不在第二個代碼段中指定的路由之一上。

您可以：

• 將所有路由重定向到您指定的路徑之一：

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