如何在Angular页面完全重载完成前实现页面重定向？

问题原因 #

你现有代码不生效有两个核心问题：

1. 语法错误：@HostListener 是类方法级别的装饰器，不能嵌套在ngOnInit生命周期函数内部，本身就不会被正确注册。
2. 逻辑错误：window:beforeunload 事件触发时页面已经进入销毁流程，Angular路由的异步导航逻辑无法完成执行，哪怕语法写对也不会生效。

解决方案 #

你需要的是页面重载完成进入应用后再触发重定向，不要在卸载阶段做跳转操作，改用本地存储打标记的方案即可实现，不需要调整原有生命周期：

• 第一步：正确注册beforeunload监听，在页面卸载前写入标记到会话存储

// 在你的页面组件类中，和ngOnInit平级声明监听方法，不要写在ngOnInit内部
@HostListener('window:beforeunload', ['$event'])
handlePageReload(event: BeforeUnloadEvent) {
  sessionStorage.setItem('redirect_to_root', '1');
}

• 第二步：在应用初始化阶段判断标记，存在则执行重定向。优先放在全局路由守卫的canActivate逻辑中（授权流程完成后、页面内容渲染前执行，不会出现旧内容短暂展示的问题，适配你的长授权流程场景），其次可以放在AppComponent的ngOnInit中：

// 示例：AppComponent中实现
ngOnInit() {
  if (sessionStorage.getItem('redirect_to_root') === '1') {
    sessionStorage.removeItem('redirect_to_root');
    this.router.navigateByUrl('/');
  }
}

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