Angular MatTab : Remember Selected Tab

Question

我是 Angular 的新手，我希望我的代码能够记住我在哪个选项卡上，即使在我刷新页面或转到另一个页面然后返回后也是如此。因此，如果我在 tab2 上并刷新浏览器，我希望页面再次加载 tab2 而不是返回到 tab1，因为 Angular Material 选项卡是默认的。我将如何做到这一点？谢谢!

我正在使用如下所示的 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);
}

...该事件绑定(bind)到 MatTabGroup的 selectedIndexChange事件。然后，在页面加载时，从本地存储中获取信息并设置选项卡:

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
}

然而...

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

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