如何从Angular Router Events中筛选出最后一个NavigationEnd事件？

你完全没必要用forEach遍历所有事件条目来拿到最后一个NavigationEnd——因为Angular的router.events是一个Observable流，我们可以用RxJS的操作符更优雅地实现这个需求，而且代码逻辑更清晰。

下面给你两种常用的优化方案：

方案1：直接获取最新的NavigationEnd事件 #

如果只是想拿到当前已经发生的最后一次导航事件，或者监听后续最新的导航事件，可以用filter + shareReplay(1)组合：

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

// 在组件或服务的构造函数中注入Router
constructor(private router: Router) {}

// 定义一个Observable，始终保存最新的NavigationEnd事件
private latestNavigation$ = this.router.events.pipe(
  // 只保留NavigationEnd类型的事件
  filter(event => event instanceof NavigationEnd),
  // 缓存最新的1个事件，新订阅时直接返回最新值
  shareReplay(1)
);

// 获取最新导航事件的方法
getLatestNavigation() {
  this.latestNavigation$.subscribe((event: NavigationEnd) => {
    console.log('target page: ', event.urlAfterRedirects);
  });
}

这个方案的好处是：

• 不用手动遍历所有历史事件
• 任何时候订阅latestNavigation$，都能直接拿到当前最新的导航结果
• 符合Angular响应式编程的风格

方案2：用scan跟踪最新事件 #

如果你需要持续跟踪每次导航的最新状态，可以用scan操作符来维护最新的事件引用：

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

constructor(private router: Router) {}

private latestNavigation$ = this.router.events.pipe(
  filter(event => event instanceof NavigationEnd),
  // 每次有新的NavigationEnd事件，就更新为当前事件
  scan((_, current) => current, {} as NavigationEnd),
  shareReplay(1)
);

// 使用时直接订阅即可
ngOnInit() {
  this.latestNavigation$.subscribe(event => {
    console.log('当前页面地址：', event.urlAfterRedirects);
  });
}

额外提醒：避免内存泄漏 #

如果是在组件中使用订阅，记得在组件销毁时取消订阅，防止内存泄漏：

import { Subscription } from 'rxjs';

private navSubscription!: Subscription;

ngOnInit() {
  this.navSubscription = this.latestNavigation$.subscribe(event => {
    console.log('target page: ', event.urlAfterRedirects);
  });
}

ngOnDestroy() {
  this.navSubscription.unsubscribe();
}

或者更简单的方式，用Angular的async管道，它会自动帮你处理订阅和取消订阅：

<!-- 在组件模板中直接使用 -->
<div>当前页面：{{ latestNavigation$ | async | json }}</div>

你原来的代码其实是通过订阅流，每次收到NavigationEnd事件就更新变量ne，本质上和scan的思路类似，但用RxJS操作符能让代码更简洁、可读性更强，也更符合Angular的最佳实践。

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