angular - 如何使整个 mat-tab 功能像 anchor 标签一样

Question

这里我遇到了垫片的问题。为了导航到新路线，我需要单击标签而不是选项卡，但我需要的是每当我单击 mat-tab 时都需要导航到新路线。

我的代码如下所示

<div class="form-wizard-page">

    <div class="container always"> 
    
    <div class="card alternative">
        
    
    <mat-tab-group class="form-wizard" [(selectedIndex)]="selectedIndex">
            
    <mat-tab *ngFor="let name of names; let i = index" >
    
            <ng-template mat-tab-label>

            <a class="routes" (click)="route(routes[i])">{{ name }}</a>

            </ng-template>
            
     </mat-tab>

    
    
    </mat-tab-group> 
    
    <div  >
    
    <router-outlet></router-outlet>
    
    </div>
    
    </div>
    
    </div>
    
    </div>
    

Answer 1

将click事件移动到mat-tab元素如下:

<mat-tab *ngFor="let name of names; let i = index" (click)="route(routes[i])">
    <ng-template mat-tab-label>
        <a class="routes">{{ name }}</a>
    </ng-template>  
</mat-tab>