我是 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>
“...”只是表格属性。
最佳答案
在页面被销毁后客户端存储信息的唯一方法是使用本地存储。您可以像这样将信息存储在浏览器中:
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 .
关于 Angular MatTab : Remember Selected Tab,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53839668/