Angular中父路由组件如何获取当前激活子路由组件内部的属性值

以下3种方案可以覆盖不同场景的需求：

方案1：路由data字段配置静态元信息（最适合固定标题场景，实现成本最低） #

直接在子路由的配置中附加自定义元数据，不需要改子组件代码：

const routes: Routes = [
  { 
    path: 'master', 
    component: MasterComponent, 
    children: [
      {
        path: 'first',
        component: FirstComponent,
        data: { pageTitle: '第一个页面的标题' } // 新增自定义元数据
      },
      {
        path: 'second',
        component: SecondComponent,
        data: { pageTitle: '第二个页面的标题' }
      }
    ]
  }
];

然后在MasterComponent中监听路由变化，读取当前激活子路由的元数据：

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

export class MasterComponent {
  currentTitle = '';
  constructor(private router: Router, private route: ActivatedRoute) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const childRoute = this.route.firstChild?.snapshot;
      this.currentTitle = childRoute?.data['pageTitle'] || '默认标题';
    });
  }
}

方案2：公共服务做状态共享（最适合标题需要动态变化的场景） #

如果子组件的标题会根据内部逻辑动态修改（比如加载完接口数据后更新标题），用共享服务实现跨组件通信：

1. 先创建一个全局的页面状态服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PageStateService {
  private readonly titleSubject = new BehaviorSubject<string>('默认标题');
  public title$ = this.titleSubject.asObservable();

  setTitle(title: string) {
    this.titleSubject.next(title);
  }
}

2. 子组件内部根据需要更新标题：

// 以FirstComponent为例
export class FirstComponent implements OnInit {
  constructor(private pageState: PageStateService) {}

  ngOnInit() {
    // 可以在任意时机调用，比如接口请求完成后更新
    this.pageState.setTitle('动态更新的第一个页面标题');
  }
}

3. MasterComponent中订阅标题变化：

export class MasterComponent implements OnInit {
  currentTitle = '';
  constructor(private pageState: PageStateService) {}

  ngOnInit() {
    this.pageState.title$.subscribe(title => {
      this.currentTitle = title;
    });
  }
}

方案3：直接获取router-outlet挂载的子组件实例（适合需要读取子组件任意属性的场景） #

这个方案完全匹配你想直接取子组件属性的需求，不需要提前指定子组件类型：

1. 给MasterComponent模板里的router-outlet绑定activate事件：

<router-outlet (activate)="onChildComponentActivate($event)"></router-outlet>

2. 在MasterComponent中实现事件回调，直接获取子组件实例的属性：

export class MasterComponent {
  currentTitle = '';

  onChildComponentActivate(childComponent: any) {
    // 只要所有子组件都约定有customTitle这个属性，直接读取即可
    this.currentTitle = childComponent.customTitle || '默认标题';
  }
}

补充说明：如果要做类型校验，可以让所有子组件都实现同一个接口，比如interface PageComponent { customTitle: string }，回调参数的类型改成PageComponent即可避免类型错误。

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