Angular嵌套路由中如何在LayoutComponent获取路由data？

问题场景 #

当前路由结构中，LayoutComponent作为根路由的组件，其下嵌套了懒加载的sys路由，带data配置的menu路由是sys路由的子路由。在LayoutComponent中直接通过ActivatedRoute或Router.root获取data时返回undefined。

原因分析 #

1. LayoutComponent对应的ActivatedRoute实例是根路由（空路径）的节点，该节点本身无data配置，目标data存在于深层嵌套的懒加载子路由节点中。
2. 懒加载路由初始化有延迟，ngOnInit执行时子路由可能未完全激活，导致快照数据未更新。

解决方案 #

方法一：遍历ActivatedRoute树获取深层路由data #

通过循环遍历ActivatedRoute的子节点，定位到最底层的激活路由，再获取其data。同时监听路由导航完成事件，确保路由加载完成后再获取数据。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

export class LayoutComponent implements OnInit {
  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听路由导航完成事件，确保路由加载完成
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const activeData = this.getDeepestRouteData(this.activatedRoute);
      console.log(activeData); // 输出 {title: '菜单管理'}
    });
  }

  // 遍历到最底层激活路由并返回其data
  private getDeepestRouteData(route: ActivatedRoute): any {
    let currentRoute = route;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    return currentRoute.snapshot.data;
  }
}

方法二：通过Router快照遍历路由树 #

在导航完成后，遍历Router的路由快照根节点，找到最底层的激活路由节点，获取其data。

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

export class LayoutComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let currentRoute = this.router.routerState.snapshot.root;
      // 遍历到最底层的激活路由
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      console.log(currentRoute.data); // 输出 {title: '菜单管理'}
    });
  }
}

补充说明 #

如果需要合并所有层级路由的data（比如父路由也配置了data），可以修改遍历逻辑，将所有节点的data合并为一个对象：

private mergeAllRouteData(route: ActivatedRoute): any {
  let mergedData = { ...route.snapshot.data };
  let currentRoute = route;
  while (currentRoute.firstChild) {
    currentRoute = currentRoute.firstChild;
    mergedData = { ...mergedData, ...currentRoute.snapshot.data };
  }
  return mergedData;
}

内容的提问来源于stack exchange，提问作者王成委