Angular路由跳转后自动激活指定Mat-Tab的实现方法咨询

没问题，这两个需求在Angular里实现起来很顺畅，我分步骤给你讲清楚：

1. 从Verify组件跳转至带锚点的目标路由 #

你有两种实现方式，按需选择即可：

方式一：模板驱动的routerLink #

直接在按钮上绑定属性，不用写组件逻辑，适合简单跳转场景：

<!-- verify.component.html -->
<button mat-button 
        [routerLink]="['/user/info', 3]" 
        fragment="personalInfo">
  跳转至用户个人信息页
</button>

方式二：通过Router服务编程式跳转 #

如果需要在跳转前做前置逻辑（比如数据校验、状态更新），用这种方式更灵活：
首先在组件类中导入并注入Router：

// verify.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-verify',
  templateUrl: './verify.component.html',
  styleUrls: ['./verify.component.css']
})
export class VerifyComponent {
  constructor(private router: Router) {}

  goToUserInfo(): void {
    // 这里可以添加跳转前的逻辑，比如表单验证
    this.router.navigate(['/user/info', 3], { 
      fragment: 'personalInfo' 
    });
  }
}

然后在模板中绑定点击事件：

<button mat-button (click)="goToUserInfo()">跳转至用户个人信息页</button>

2. 目标组件（UserInfoComponent）自动激活指定Tab #

接下来处理核心需求：访问带锚点的URL时，自动打开第二个Mat-Tab。

步骤1：模板中定义Mat-Tab Group #

给mat-tab-group添加模板引用变量，方便后续在组件类中控制它：

<!-- user-info.component.html -->
<mat-tab-group #tabGroup>
  <mat-tab label="基本信息">
    <!-- 第一个Tab的内容 -->
  </mat-tab>
  <mat-tab label="个人信息" id="personalInfo">
    <!-- 第二个Tab的内容 -->
  </mat-tab>
</mat-tab-group>

步骤2：组件类中监听路由锚点并激活Tab #

通过ActivatedRoute监听URL中的锚点（fragment），然后设置mat-tab-group的selectedIndex（注意：Tab索引从0开始，第二个Tab对应索引1）：

// user-info.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-user-info',
  templateUrl: './user-info.component.html',
  styleUrls: ['./user-info.component.css']
})
export class UserInfoComponent implements OnInit {
  // 获取模板中的mat-tab-group实例
  @ViewChild('tabGroup') tabGroup!: MatTabGroup;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听路由锚点变化，支持直接访问URL或跳转后的场景
    this.route.fragment.subscribe(fragment => {
      if (fragment === 'personalInfo') {
        // 切换到第二个Tab
        this.tabGroup.selectedIndex = 1;
      }
    });
  }
}

3. 确保路由配置正确 #

最后检查你的app-routing.module.ts，确保已配置对应路由：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { VerifyComponent } from './verify/verify.component';
import { UserInfoComponent } from './user-info/user-info.component';

const routes: Routes = [
  { path: 'verify', component: VerifyComponent },
  { path: 'user/info/:id', component: UserInfoComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这样就完成了所有需求：点击Verify组件的按钮会跳转到带锚点的用户信息页，直接访问该URL也会自动打开第二个Tab。

内容的提问来源于stack exchange，提问作者kianoush dortaj