在 Angular 中导航回时恢复活动选项卡

Question

我有一个 angular 应用程序，它包含多个逻辑视图（具有匹配的路由）。每个视图显示多个选项卡。根据活动选项卡，我确定要显示/隐藏 UI 的哪些部分。

由于选项卡不是路线的一部分，因此加载视图始终显示第一个选项卡。这在大多数情况下很好，但是当用户导航到另一个视图然后导航回（使用浏览器后退按钮）时，恢复以前选择的选项卡是有意义的。

任何想法如何在不向路线添加活动标签索引的情况下实现这一目标？

顺便说一句，我想避免将活动选项卡添加到路由的原因是：

到目前为止，我考虑使用本地存储来存储视图中的最后一个活动选项卡，并在检测到浏览器导航回来时恢复它。但这感觉就像一个黑客，所以我试图避免它。我正在寻找一种通过 angular 的做事方式感觉“正确”的解决方案......

任何想法表示赞赏！

Answer 1

最轻量级的“角度”方式可能是创建一个存储每个视图最后选择的选项卡的服务。这将无法在页面重新加载后继续存在。

为了在页面重新加载后继续存在，服务可以将数据存储在sessionStorage或中localStorage。

但是，复制粘贴 URL 时这仍然不起作用。在 URL 中存储选定的选项卡可以解决此问题。

您对在 URL 中存储所选选项卡的担忧是没有根据的。可以在 URL 内更新所选选项卡，而不会影响浏览器历史记录，也不会重新加载组件，例如：

onTabChange(event: MatTabChangeEvent) {
    this.router.navigate([], { queryParams: { tab: event.index }, replaceUrl: true });
}

最好通过“ariaLabbeledby”标记您的选项卡，然后使用它event.tab.ariaLabbeledby来避免重新排列选项卡时出现问题。