Mat Tab Group结合RouterLink：切换Tab后激活状态与墨水栏异常

问题原因 #

你当前的写法是在<mat-tab>内部嵌套<div>并绑定routerLink，这种方式会导致：

1. 点击标签时路由跳转由<div>触发，但<mat-tab-group>无法感知到<mat-tab>的选中状态变化
2. selectedIndex绑定的selectedTabIndex没有同步路由变化，导致墨水栏和激活状态停留在初始标签

解决方案 #

方案1：使用Mat Tab原生的routerLink属性（推荐）

直接把routerLink和skipLocationChange绑定到<mat-tab>组件上，配合routerTabs指令自动同步路由与标签状态：

<mat-tab-group routerTabs [@.disabled]="true" [disableRipple]="true">
    <mat-tab [routerLink]="['./home']" [skipLocationChange]="true">
        <ng-template mat-tab-label>
            <span>Tab 1</span>
        </ng-template>
    </mat-tab>
    <mat-tab [routerLink]="['./about']" [skipLocationChange]="true">
        <ng-template mat-tab-label>
            <span>Tab 2</span>
        </ng-template>
    </mat-tab>
</mat-tab-group>

方案2：手动同步路由与selectedIndex（适合需要额外逻辑的场景）

如果必须保留手动控制selectedIndex，需要在组件中监听路由变化，动态更新索引值：

组件代码：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  selectedTabIndex = 0;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由结束事件，更新选中索引
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.selectedTabIndex = event.url.includes('/about') ? 1 : 0;
      }
    });
  }

  tabChanged(event: any): void {
    // 这里可以添加标签切换的额外逻辑
  }
}

对应模板：

<mat-tab-group routerTabs [selectedIndex]="selectedTabIndex" (selectedTabChange)="tabChanged($event)" [@.disabled]="true" [disableRipple]="true">
    <mat-tab [routerLink]="['./home']" [skipLocationChange]="true">
        <ng-template mat-tab-label>
            <span>Tab 1</span>
        </ng-template>
    </mat-tab>
    <mat-tab [routerLink]="['./about']" [skipLocationChange]="true">
        <ng-template mat-tab-label>
            <span>Tab 2</span>
        </ng-template>
    </mat-tab>
</mat-tab-group>

关键说明 #

• 避免在<mat-tab>内部元素上绑定routerLink，应该直接绑定到<mat-tab>本身，让mat-tab-group的routerTabs指令能正确感知标签选中状态
• 使用<ng-template mat-tab-label>是Angular Material推荐的自定义标签内容的方式，能避免嵌套元素导致的事件传递问题
• 如果使用skipLocationChange，需要直接绑定到<mat-tab>的属性上，而不是内部元素

内容的提问来源于stack exchange，提问作者Azhar Parvaiz