时间戳

首页 > 解决方案 > 使用 History API 存储状态

angular - 使用 History API 存储状态

问题描述

当导航离开我的组件时，我想在浏览器历史状态对象中存储一些状态信息，以便在返回时可以恢复它。我想避免使用服务来存储此信息，因为如果我“新”导航到我的组件，我不想恢复这些属性 - 仅当我使用浏览器后退按钮（或location.back()）时。

我正在考虑在被导航的组件中做这样的事情：

ngOnDestroy(): void {
  let state: any = this.location.getState();
  this.location.replaceState("", undefined, { ...state, selectedTabIdx: this.selIdx });
}

以及同一组件中的以下内容：

ngOnInit(): void {
  let state = this.location.getState();

  if (state.selectedTabIdx !== undefined)
    this.selIdx = state.selectedTabIdx;
}

有没有办法做到这一点？上面的代码不起作用（这更像是一厢情愿的练习），因为我进入的状态ngOnInit不包含 property selectedTabIdx。

我认为历史状态对象将是存储此信息的理想场所，因为它应该仅用于历史中的这一步，也许您可​​以在历史中多次使用相同的组件并进行不同的选择等。

标签： angularangular-material

解决方案

推荐阅读