Angular中如何通过location.go()存储状态并在window:popstate中恢复？

问题原因 #

Angular的Location.go()方法传入的自定义state并不会直接写入浏览器的history state对象，而是被保存在Angular框架内部的状态管理容器中。因此原生window:popstate事件的ev.state只能看到Angular自动添加的navigationId字段，无法直接获取到你传入的{data:42}。

解决方法 #

方法一：通过Angular Location服务的getState()获取 #

既然自定义状态已经被Angular存储，直接调用Location服务的getState()方法即可拿到你传入的状态数据，修改你的popState方法：

@HostListener("window:popstate", ["$event"])
private popState(ev: PopStateEvent): void {
  const storedState = this.location.getState();
  console.log(storedState.data); // 输出42
}

方法二：直接使用原生history API写入状态 #

如果你需要让浏览器的history state也包含自定义数据，可以跳过Angular的Location.go()，直接使用原生history.replaceState（替换当前历史记录，和Location.go()行为一致）：

// 修改URL并将自定义状态写入浏览器history
history.replaceState({data: 42}, "", "url");

此时在popstate事件中，ev.state.data就能直接拿到42。

注意事项 #

• 方法一更贴合你当前使用Angular Location服务的场景，无需额外调整现有逻辑；
• 若使用原生history API，注意不要和Angular路由的导航逻辑冲突，确保仅在需要修改URL但不触发组件切换时使用。

内容的提问来源于stack exchange，提问作者Raid