Angular静态值传递问题：父组件如何根据子路由修改标题？

针对你遇到的父组件通过router-outlet加载子组件后，需要同步子组件静态标题的需求，这里提供两种更合适的方案，完全不需要用ngIf判断路由：

方案一：使用路由配置的Data字段（推荐） #

因为标题是静态值，直接把标题配置在路由里是最优雅的方式，和组件解耦，维护更方便。

1. 配置路由Data
   在路由模块里给每个子路由添加data字段，存入静态标题：

const routes: Routes = [
  { path: 'user', component: UserComponent, data: { pageTitle: '用户管理' } },
  { path: 'settings', component: SettingsComponent, data: { pageTitle: '系统设置' } }
];

2. 父组件监听路由变化获取标题
   在父组件里订阅路由事件，每次路由切换后读取当前激活路由的data：

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

export class ParentComponent {
  currentPageTitle = '';
  private routeSub?: Subscription;

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

  ngOnInit() {
    // 初始化获取当前路由标题
    this.currentPageTitle = this.getActiveRouteData('pageTitle');
    
    // 监听路由切换更新标题
    this.routeSub = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.currentPageTitle = this.getActiveRouteData('pageTitle');
    });
  }

  // 递归获取当前激活的子路由数据
  private getActiveRouteData(key: string): string {
    let currentRoute = this.activatedRoute;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    return currentRoute.snapshot.data[key] || '';
  }

  ngOnDestroy() {
    this.routeSub?.unsubscribe();
  }
}

3. 父组件模板绑定标题
   直接把获取到的标题绑定到模板：

<div>{{ currentPageTitle }}</div>
<router-outlet></router-outlet>

方案二：直接读取子组件静态属性 #

如果标题必须定义在子组件里，可以通过router-outlet的activate事件获取子组件实例，直接读取静态属性，不需要用Output发射：

1. 子组件定义静态标题

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>用户管理页面</p>'
})
export class UserComponent {
  readonly pageTitle = '用户管理'; // 静态标题
}

2. 父组件通过activate事件获取子组件实例

<div>{{ currentPageTitle }}</div>
<router-outlet (activate)="onChildLoaded($event)"></router-outlet>

3. 父组件读取静态属性

export class ParentComponent {
  currentPageTitle = '';

  onChildLoaded(childComponent: any) {
    // 检查子组件是否有pageTitle属性
    if (childComponent.pageTitle) {
      this.currentPageTitle = childComponent.pageTitle;
    }
  }
}

关于你之前的Output方案失效的原因 #

你在子组件ngOnInit里发射事件时，父组件可能还没完成对Output的订阅（因为router-outlet加载组件的时机问题），换成ngAfterViewInit发射会更稳妥，但这种方式不如上面两种方案直接。

不推荐用ngIf判断路由的原因 #

用ngIf判断路由会让父组件逻辑和具体路由路径耦合，后续路由路径修改时需要同步修改父组件的判断逻辑，维护成本高，而且不符合Angular路由的设计思路。

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