Angular MatTab：记住选定的选项卡

Question

我对 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>

“...”只是表属性。

Answer 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>and<mat-tab-link>而不是组和选项卡。此功能的文档位于此处的 API 站点上。