Angular 16页面刷新检测：原Angular 12代码失效求修改方案

你的代码在Angular 16中失效的核心原因是：页面刷新时NavigationEnd事件的id不再固定为1。Angular 14之后调整了路由初始化逻辑，id变为递增的导航序号，每次导航都会累加，原来依赖event.id === 1的判断条件不再成立，导致updateDetails()无法触发。

以下是两种可行的修改方案：

方案1：移除event.id === 1的判断 #

只保留event.url === event.urlAfterRedirects的判断即可——页面刷新时不存在路由重定向，这两个值必然相等，同时后续正常路由导航如果没有重定向也会触发该逻辑，完全覆盖你的需求：

this._router.events
  .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
  .subscribe(event => {
    if (event.url === event.urlAfterRedirects) {
      this.updateDetails();
    }
  });

方案2：组件初始化时直接调用（更稳妥） #

页面刷新时组件会重新初始化，ngOnInit钩子会执行，直接在这里调用一次updateDetails()，再监听路由变化处理后续的导航场景，逻辑更清晰：

ngOnInit() {
  // 页面刷新/首次加载时立即执行
  this.updateDetails();

  // 监听后续路由导航，按需执行更新逻辑
  this._router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      this.updateDetails();
    });
}

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