如何从子路由向父组件读取路由静态data配置？

核心实现思路 #

直接通过Angular的ActivatedRoute获取当前激活子路由的静态data配置，无需额外服务存储，完全基于路由本身的静态配置完成组件自定义。

具体代码实现 #

1. LayoutComponent逻辑层实现 #

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
  routeConfig: { backButton?: boolean; titleColor?: string } = {};

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听路由导航完成事件，确保获取最新子路由配置
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        // 递归获取最深层级激活路由，适配懒加载/多模块嵌套场景
        let currentRoute = this.activatedRoute;
        while (currentRoute.firstChild) {
          currentRoute = currentRoute.firstChild;
        }
        return currentRoute.snapshot.data;
      })
    ).subscribe(data => {
      // 合并配置并设置默认值，避免未配置字段出现异常
      this.routeConfig = {
        backButton: data.backButton ?? false,
        titleColor: data.titleColor ?? '#333'
      };
    });
  }
}

2. LayoutComponent模板层使用 #

<header [style.color]="routeConfig.titleColor">
  <!-- 根据backButton配置控制返回按钮显示 -->
  <button *ngIf="routeConfig.backButton" (click)="router.navigate(['../'], { relativeTo: activatedRoute })">
    返回
  </button>
  <h1>页面标题</h1>
</header>

<main>
  <router-outlet></router-outlet>
</main>

关键细节说明 #

• 递归获取子路由：通过firstChild遍历到最深层级激活路由，确保拿到当前页面对应的路由配置，适配多模块、懒加载等复杂路由场景。
• 监听NavigationEnd事件：路由导航完成后再读取配置，避免路由切换过程中数据未同步的问题。
• 默认值兜底：用空值合并运算符??为未配置的字段设置默认值，保证组件渲染的稳定性。

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