Angular无需路由URL，点击浏览器返回键切换Mat Tab的实现方案

核心思路是手动维护Tab的访问历史，结合浏览器history API和popstate事件实现，无需依赖路由。具体步骤如下：

1. 组件内定义状态变量 #

在组件类中维护Tab历史记录、当前索引，以及标记位区分主动切换与返回操作：

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html',
  styleUrls: ['./tab-demo.component.css']
})
export class TabDemoComponent implements OnInit, OnDestroy {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  tabHistory: number[] = [];
  currentTabIndex = 0;
  isPopstateTriggered = false; // 标记是否为浏览器返回触发的操作

  ngOnInit(): void {
    // 初始化历史记录，加入默认选中的Tab索引
    this.tabHistory.push(this.currentTabIndex);
    // 监听浏览器返回事件
    window.addEventListener('popstate', this.handlePopState.bind(this));
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，避免内存泄漏
    window.removeEventListener('popstate', this.handlePopState.bind(this));
  }
}

2. 处理Tab切换事件 #

绑定MatTabGroup的selectedTabChange事件，用户主动切换Tab时更新历史记录并推入浏览器历史状态：

onTabChange(event: any): void {
  if (!this.isPopstateTriggered) {
    // 主动切换Tab时，更新当前索引并加入历史记录
    this.currentTabIndex = event.index;
    this.tabHistory.push(this.currentTabIndex);
    // 往浏览器history添加自定义状态，用于返回时识别
    history.pushState({ tabIndex: this.currentTabIndex }, '', '');
  }
  // 重置标记位
  this.isPopstateTriggered = false;
}

对应的HTML模板：

<mat-tab-group #tabGroup (selectedTabChange)="onTabChange($event)" [selectedIndex]="currentTabIndex">
  <mat-tab label="Tab 1">内容1</mat-tab>
  <mat-tab label="Tab 2">内容2</mat-tab>
  <mat-tab label="Tab 3">内容3</mat-tab>
</mat-tab-group>

3. 处理浏览器返回事件 #

用户点击返回按钮时触发popstate事件，从历史记录中取出上一个Tab索引并切换：

handlePopState(event: PopStateEvent): void {
  if (this.tabHistory.length > 1) {
    // 移除当前索引（返回操作回到上一个Tab）
    this.tabHistory.pop();
    // 获取上一个Tab索引
    this.currentTabIndex = this.tabHistory[this.tabHistory.length - 1];
    // 更新TabGroup选中状态
    this.tabGroup.selectedIndex = this.currentTabIndex;
    // 标记为返回操作，避免触发onTabChange中的历史记录添加逻辑
    this.isPopstateTriggered = true;
    // 替换当前history状态，避免重复返回
    history.replaceState({ tabIndex: this.currentTabIndex }, '', '');
  }
}

关键细节说明 #

• isPopstateTriggered标记位：区分用户主动切换和浏览器返回触发的操作，防止历史记录混乱。
• history.pushState/replaceState：仅添加自定义状态数据，不修改URL，满足无路由需求。
• 组件销毁时清理监听：必须移除popstate事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者test engineer