Angular项目中页面刷新时如何保持mat-tab当前选中的标签页？

步骤1：注入Router服务 #

首先在组件的constructor中添加Router依赖注入，用于修改路由查询参数：

constructor(
  private _notificationService: NotificationService,
  private formBuilder: FormBuilder,
  private _activatedRoute: ActivatedRoute,
  private _transactionService: TransactionsService,
  private router: Router // 新增路由服务注入
) {}

步骤2：修改标签切换逻辑，同步更新查询参数 #

修改setTransactionTabIndex方法，每次切换标签时将当前选中的索引写入URL的查询参数中，无需刷新整个页面：

setTransactionTabIndex(e: any) {
  this.setIsEdit(false);
  this.transactionTabIndex = e.index;    
  // 同步更新路由查询参数
  this.router.navigate([], {
    relativeTo: this._activatedRoute,
    queryParams: {
      tab: this.transactionTabIndex
    },
    replaceUrl: true, // 替换当前历史记录，避免频繁切标签产生多条无效历史记录
    queryParamsHandling: 'merge' // 保留页面其他已有的查询参数
  });
}

步骤3：优化初始化时的参数读取逻辑 #

从路由参数中拿到的tab是字符串类型，需要转为数字，同时添加边界校验避免索引越界：

ngOnInit(): void {
  this._activatedRoute.queryParams
    .subscribe(
      params => {
        if (params.tab) {
          const tabIndex = Number(params.tab);
          // 校验索引是否在合法范围内
          if (tabIndex >=0 && tabIndex < this.tabs.length) {
            this.transactionTabIndex = tabIndex;
          } else {
            this.transactionTabIndex = 0;
          }
        }
      }
    )
}

该方案通过路由查询参数存储标签状态，不仅刷新页面可以保留选中状态，分享当前页面链接给其他用户时，对方打开也会直接定位到相同的标签页，比使用localStorage存储的方案适用性更强。

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