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的{{1}}事件。然后，在页面加载时，从本地存储获取信息并设置标签：

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 }，并使每个选项卡都位于其自己的路径中。这意味着这些标签页本身的行为就像它们自己的页面一样，并且将通过正常的浏览器交互（刷新，后退，前进等）达到您的期望，并且您可以超链接到特定的标签页。

这样做非常简单。您仅使用Router和<mat-tab-nav-bar>而不是组和标签。该功能的文档位于API网站here上。

Angular MatTab：记住所选选项卡

1 个答案: