如何获取Angular页面导航过程中触发的所有路由事件？

导航至特定视图的常见路由事件序列 #

多数情况下，一次完整的Angular导航会按以下顺序触发事件（懒加载场景会额外包含路由加载相关事件）：

• NavigationStart：导航开始
• RouteConfigLoadStart（可选）：懒加载路由配置开始加载
• RouteConfigLoadEnd（可选）：懒加载路由配置加载完成
• RoutesRecognized：路由配置已匹配成功
• GuardsCheckStart：路由守卫（CanActivate等）开始检查
• ChildActivationStart：子路由激活开始
• ActivationStart：当前路由激活开始
• GuardsCheckEnd：路由守卫检查完成
• ResolveStart：Resolve数据解析开始
• ResolveEnd：Resolve数据解析完成
• ActivationEnd：当前路由激活完成
• ChildActivationEnd：子路由激活完成
• NavigationEnd：导航成功完成

如果导航被取消或失败，会触发NavigationCancel或NavigationError终止流程。

toArray()的使用判断 #

要不要在你的router.events管道里加toArray()，取决于你想要的结果形式：

• 若需一次性获取整个导航周期内的所有事件数组，必须加toArray()，但要注意：toArray()会等待上游Observable完成后，才会把收集到的所有事件打包成数组发射。因此你需要确保订阅能在导航完成时终止，让上游Observable进入完成状态。
• 若只需逐个处理每个触发的事件，完全不需要toArray()，直接订阅即可。

正确使用toArray()的代码示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, NavigationCancel, NavigationError, NavigationStart } from '@angular/router';
import { takeUntil, filter, toArray, take } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-nav-event-tracker',
  templateUrl: './nav-event-tracker.component.html'
})
export class NavEventTrackerComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    // 监听导航完成（成功/取消/失败）的信号，用于终止事件收集
    const navigationFinished$ = this.router.events.pipe(
      filter(event => 
        event instanceof NavigationEnd || 
        event instanceof NavigationCancel || 
        event instanceof NavigationError
      ),
      take(1)
    );

    this.router.events.pipe(
      // 过滤掉非具体路由事件的类型（比如RouterEvent基类实例）
      filter(event => 
        [NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RoutesRecognized, 
         GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationStart, ActivationEnd,
         ChildActivationStart, ChildActivationEnd, RouteConfigLoadStart, RouteConfigLoadEnd]
        .includes(event.constructor)
      ),
      // 导航完成时终止收集
      takeUntil(navigationFinished$),
      // 将所有收集到的事件打包成数组
      toArray()
    ).subscribe(navEvents => {
      console.log('完整导航事件序列:', navEvents);
      // 这里可以直接处理整个事件数组
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  constructor(private router: Router) { }
}

关键说明 #

• takeUntil(navigationFinished$)确保在导航结束时停止事件收集，此时上游Observable完成，toArray()才能吐出完整的事件数组。
• 如果直接用takeUntil(this.destroy$)而不监听导航完成，toArray()永远不会发射数据，因为router.events是一个持续的Observable，除非组件销毁才会终止，但组件销毁时订阅也会被清理，拿不到结果。

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