Angular路由切换时如何动态获取路由title值？

针对你遇到的问题，这里提供两种完全解耦的实现方式，无需依赖router-outlet的事件或TitleService：

方式一：通过Router事件+路由快照遍历获取title #

在navigation-title.component中注入Router，监听NavigationEnd事件，遍历路由树获取当前激活路由的title：

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

@Component({
  selector: 'app-navigation-title',
  template: `我的应用 | {{ currentRouteTitle$ | async }}`
})
export class NavigationTitleComponent {
  // 可直接在模板用async管道绑定
  currentRouteTitle$ = this.router.events.pipe(
    // 只处理导航完成的事件
    filter(event => event instanceof NavigationEnd),
    map(() => {
      let currentRoute = this.router.routerState.root;
      // 遍历到最底层的激活路由
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      // 返回路由配置的title，空值时可设默认
      return currentRoute.snapshot.title || '默认标题';
    })
  );

  constructor(private router: Router) {}
}

为什么之前的ActivatedRoute.title不生效？ #

如果你的navigation-title组件是挂载在根组件（比如AppComponent）中，直接注入的ActivatedRoute指向的是根路由，而非当前激活的子路由。通过遍历路由树到最底层节点，才能拿到对应路由配置的title。

方式二：利用Router的config匹配当前URL（适合无嵌套路由场景） #

如果你的路由没有嵌套结构，可以直接通过当前URL匹配路由配置项：

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

@Component({
  selector: 'app-navigation-title',
  template: `我的应用 | {{ currentRouteTitle$ | async }}`
})
export class NavigationTitleComponent {
  currentRouteTitle$ = this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map((event: NavigationEnd) => {
      // 从路由配置中匹配当前URL对应的项
      const matchedRoute = this.router.config.find(route => 
        route.path === event.urlAfterRedirects.slice(1) // 去掉开头的/
      );
      return matchedRoute?.title || '默认标题';
    })
  );

  constructor(private router: Router) {}
}

注意事项 #

• 两种方式都完全解耦，组件只依赖Router，无需和router-outlet绑定。
• 若使用嵌套路由，推荐第一种方式，能准确获取最底层激活路由的title。

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