Angular中RouterEvent在导航点击与刷新时为何不同？如何统一？

在Angular里订阅router.events时，点击导航和页面刷新拿到的事件对象不一样，核心原因是router.events会抛出多种类型的事件——点击导航时直接触发的是NavigationStart，而页面刷新时先触发了Scroll事件（里面嵌套了RouterEvent），但我们真正需要的导航类事件其实是统一的，只要过滤掉无关事件就能解决。

方法1：过滤出指定类型的RouterEvent #

Angular的Router提供了明确的事件类型，比如NavigationStart、NavigationEnd，我们可以用RxJS的filter操作符筛选出需要的事件，直接拿到结构一致的对象。

先导入必要的模块：

import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

然后修改订阅代码，只接收NavigationStart事件：

this.router.events.pipe(
  filter(event => event instanceof NavigationStart)
).subscribe((event: NavigationStart) => {
  console.log('统一的NavigationStart事件:', JSON.stringify(event));
});

不管是用户点击导航还是刷新页面，都会触发NavigationStart，而且结构完全相同——刷新时的Scroll事件会被直接过滤掉，不会干扰你的业务逻辑。

方法2：用NavigationEnd处理导航完成后的状态 #

如果你的逻辑需要用到导航完成后的最终URL等信息，可以换成NavigationEnd事件，同样能保证两种场景下的结构一致：

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  console.log('统一的NavigationEnd事件:', JSON.stringify(event));
});

NavigationEnd包含urlAfterRedirects这类关键字段，不管是哪种导航方式，输出的事件结构都是统一的。

补充说明 #

• 点击导航属于命令式导航，Angular直接派发NavigationStart；
• 页面刷新时，浏览器重启应用，Angular会先触发Scroll事件（用于恢复滚动位置），但真正的导航事件（NavigationStart/NavigationEnd）还是会正常触发，只是在Scroll之后。只要过滤掉非目标事件类型，就能拿到一致的RouterEvent对象。

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