【问题标题】：Angular MatTab: Remember Selected TabAngular MatTab：记住选定的选项卡
【发布时间】：2018-12-18 19:16:16
【问题描述】：

我对 Angular 还是很陌生，我希望我的代码能够记住我在哪个选项卡上，即使在我刷新页面或转到另一个页面然后回来之后也是如此。因此，如果我在 tab2 上并刷新浏览器，我希望页面再次加载 tab2 而不是返回到 tab1，因为默认情况下有角度材料选项卡。我将如何做到这一点？谢谢！

我正在使用类似于以下内容的 mat-tab-group：

<mat-tab-group>
    <mat-tab label="Table1">
        ...
    </mat-tab>
    <mat-tab label="Table2">
        ...
    </mat-tab>
    <mat-tab label="Table3">
        ...
    </mat-tab>
</mat-tab-group>

“...”只是表格属性。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在页面被销毁后，在客户端存储信息的唯一方法是使用本地存储。您可以像这样将信息存储在浏览器中：

handleMatTabChange(event: MatTabChangeEvent) {
    localStorage.setItem('userTabLocation', event.index);
}

...该事件绑定到MatTabGroup'sselectedIndexChange 事件。然后，在页面加载时，从本地存储中获取信息并设置选项卡：

ngAfterViewInit() {
    let index = localStorage.getItem('userTabLocation') || 0; // get stored number or zero if there is nothing stored
    this.tabGroup.selectedIndex = index; // with tabGroup being the MatTabGroup accessed through ViewChild
}

但是...

我认为更好的解决方案是将当前标签绑定到Router，并让每个标签都在自己的路径中。这意味着选项卡本身就像它们自己的页面一样，并且会通过正常的浏览器交互（刷新、后退、前进等）按照您所期望的方式运行，并且您可以超链接到特定的选项卡。

这样做非常简单。您只需使用 <mat-tab-nav-bar> 和 <mat-tab-link> 而不是组和选项卡。此功能的文档位于 API 站点 here。

【讨论】：