Angular 11：组件如何监听路由传递的状态变更？

这个问题确实是Angular路由复用场景下的一个常见痛点——当组件实例被复用（比如导航到同一个组件路由），常规的初始化钩子（如ngOnInit）只会执行一次，导致无法获取新的路由状态。不过有个可靠的解决方案，利用Angular的路由事件结合getCurrentNavigation()来捕获每次导航的最新状态：

具体实现步骤 #

1. 注入Router服务：在你的登录组件中注入Angular的Router服务，用于监听路由事件和获取当前导航上下文。
2. 监听NavigationStart事件：在ngOnInit中订阅路由事件，过滤出NavigationStart类型的事件——每次导航（无论组件是否复用）都会触发这个事件，是捕获最新状态的最佳时机。
3. 获取最新路由状态：在NavigationStart的回调中，通过Router.getCurrentNavigation()?.extras.state获取本次导航传递的状态，更新组件内部的变量。

代码示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { filter, Subscription } from 'rxjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
  private returnUrl: string | null = null;
  private routerSub!: Subscription;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.routerSub = this.router.events.pipe(
      // 只关注导航开始的事件
      filter(event => event instanceof NavigationStart)
    ).subscribe(() => {
      // 获取当前导航的上下文，拿到传递的状态
      const currentNavigation = this.router.getCurrentNavigation();
      if (currentNavigation?.extras.state) {
        // 更新组件内的返回URL变量
        this.returnUrl = currentNavigation.extras.state['returnUrl'] || '/';
      }
    });
  }

  // 登录成功后跳转到目标URL
  onLoginSuccess(): void {
    this.router.navigateByUrl(this.returnUrl || '/');
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.routerSub.unsubscribe();
  }
}

为什么这个方案有效？ #

• NavigationStart事件会在每次路由导航开始时触发，无论目标路由是否复用现有组件实例，这保证了我们能捕获到每一次导航的状态变化。
• Router.getCurrentNavigation()在导航开始阶段会持有当前导航的完整上下文（包括extras.state），这个方法仅在导航过程中有效，所以必须在NavigationStart的回调中调用——如果等到NavigationEnd事件触发，导航已经完成，getCurrentNavigation()会返回null。

针对你的实际场景说明 #

当用户第一次点击受保护链接时，路由守卫导航到/login并传递returnUrl，组件通过上述逻辑拿到第一个目标URL；当用户随后点击另一个受保护链接时，路由守卫再次导航到/login（组件复用），此时NavigationStart事件再次触发，你就能获取到更新后的returnUrl，确保登录后跳转到最新的目标页面。

注意事项 #

• 路由状态（state）存储在浏览器的History API中，页面刷新后会丢失，如果需要持久化状态，可能需要结合本地存储做补充处理。
• 务必在组件销毁时取消路由事件的订阅，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Jürgen Bayer