angular - 如何使整个 mat-tab 功能像锚标签

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>

Answer 2

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