如何在Angular Material标签页刷新或返回后加载指定标签页？

你可以通过以下步骤完成需求：

1. 组件初始化时读取本地存储的索引 #

在组件的ngOnInit生命周期钩子中，读取localStorage里保存的标签页索引，转换为数字类型后赋值给组件变量。如果没有保存值，默认选中第一个标签页（索引0）。

2. 绑定标签组的选中索引 #

给mat-tab-group添加[selectedIndex]属性，绑定到组件中的索引变量，让Angular自动根据变量值选中对应标签页。

3. 完善存储逻辑（可选但推荐） #

确保存入localStorage的是字符串类型（因为localStorage仅支持存储字符串），避免类型转换问题。

修改后的完整代码 #

TypeScript 代码

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  @ViewChild('tabGroup') tabGroup!: MatTabGroup;
  theIndex = 0; // 默认选中第一个标签页

  ngOnInit(): void {
    // 从localStorage读取保存的标签索引
    const savedTabIndex = localStorage.getItem('lastTab');
    if (savedTabIndex !== null) {
      const parsedIndex = parseInt(savedTabIndex, 10);
      // 可选：确保索引在有效范围内，避免因标签页数量变化导致的错误
      this.theIndex = Math.max(0, Math.min(parsedIndex, this.tabGroup._tabs.length - 1));
    }
  }

  tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    this.theIndex = tabChangeEvent.index;
    // 将索引转为字符串存入localStorage
    localStorage.setItem('lastTab', this.theIndex.toString());
  }
}

HTML 代码

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)" [selectedIndex]="theIndex">
    <mat-tab label="Overview">1</mat-tab>
    <mat-tab label="Overview">2</mat-tab>
    <mat-tab label="Overview">3</mat-tab>
    <mat-tab label="Overview">4</mat-tab>
</mat-tab-group>

关键说明 #

• [selectedIndex]是Angular Material标签组的绑定属性，用于控制当前选中的标签页
• ngOnInit在组件初始化时执行，保证页面加载时就能读取到之前保存的索引
• 加入索引范围校验是为了防止因标签页增删导致保存的索引失效，提升鲁棒性

内容的提问来源于stack exchange，提问作者Shahed RTW