如何正确映射Angular的NavigationEnd与ActivationEnd路由数据？

你的核心问题在于拆分两个事件流后，switchMap会在NavigationEnd触发时才订阅ActivationEnd流，导致拿到的是下一次导航的ActivationEnd数据，完全错位。正确的做法是在同一个导航周期内收集ActivationEnd数据，直到NavigationEnd触发时再组合输出。

方案一：使用scan在导航周期内收集数据 #

这种方式更简洁，直接在事件流中跟踪ActivationEnd的路由数据，直到NavigationEnd到来时输出组合结果：

this.router.events.pipe(
  // 仅保留需要的两种事件
  filter(event => event instanceof ActivationEnd || event instanceof NavigationEnd),
  // 扫描事件流，收集ActivationEnd的数据，遇到NavigationEnd时输出组合结果
  scan((acc, event) => {
    if (event instanceof ActivationEnd) {
      // 若需当前激活路由的data（嵌套路由场景下取最后一个ActivationEnd）
      acc.data = event.snapshot.data;
      // 若你确实需要首个ActivationEnd的data，替换为：
      // acc.data = acc.data || event.snapshot.data;
      return acc;
    } else if (event instanceof NavigationEnd) {
      // 组合url和收集到的data，然后重置收集器
      const result = { url: event.urlAfterRedirects, data: acc.data };
      acc.data = null;
      return result;
    }
    return acc;
  }, { data: null }),
  // 仅输出完整的组合结果（即NavigationEnd触发后的有效数据）
  filter(result => result.url !== undefined)
).subscribe(({ url, data }) => {
  console.log(url, JSON.stringify(data));
});

方案二：使用bufferWhen批量收集ActivationEnd事件 #

这种方式先收集一次导航内所有的ActivationEnd事件，再和对应的NavigationEnd关联：

this.router.events.pipe(
  filter(event => event instanceof ActivationEnd),
  // 收集所有ActivationEnd，直到NavigationEnd触发时结束收集
  bufferWhen(() => this.router.events.pipe(filter(e => e instanceof NavigationEnd))),
  // 关联最新的NavigationEnd的url
  withLatestFrom(
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(e => e.urlAfterRedirects),
      take(1)
    )
  ),
  // 组合url和目标路由数据（这里取最后一个ActivationEnd的data，对应当前激活路由）
  map(([activationEnds, url]) => ({
    url,
    data: activationEnds[activationEnds.length - 1].snapshot.data
    // 若需首个ActivationEnd的data，替换为：
    // data: activationEnds[0].snapshot.data
  }))
).subscribe(({ url, data }) => {
  console.log(url, JSON.stringify(data));
});

关键说明 #

• 嵌套路由场景下，一次导航会触发多个ActivationEnd（从父路由到子路由依次触发），通常我们需要的是最后一个ActivationEnd的data（对应当前激活的子路由）；若你确实需要首个（父路由）的data，可按代码注释替换取值逻辑。
• 两种方案都保证了urlAfterRedirects和对应路由data的严格关联，不会出现错位问题。

内容的提问来源于stack exchange，提问作者me-and-viy