Angular 14 组件中如何获取路由配置的原始title属性

取值失败的核心原因 #

• 你无法通过自定义Symbol('RouteTitle')拿到值是Symbol的基础特性导致的：Symbol()方法每次调用都会生成全局唯一的标识，你手动创建的Symbol和Angular路由内部存储title使用的Symbol不是同一个引用，自然索引不到对应的值。

正确实现方式 #

Angular官方已经将路由内部存储title用的Symbol作为常量导出，直接引入使用即可拿到未经过TitleStrategy处理的原始路由title，完全不需要做字符串截取。

1. 首先从路由包导入所需依赖：

import { ActivatedRoute, ROUTE_TITLE } from '@angular/router';
import { Component, OnInit } from '@angular/core';

2. 在组件内直接通过官方常量取值：

@Component({
  selector: 'app-example-page',
  template: `<h1>{{ pageTitle }}</h1>`
})
export class ExamplePageComponent implements OnInit {
  pageTitle = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 快照方式直接取，适合静态路由场景
    this.pageTitle = this.route.snapshot.data[ROUTE_TITLE];

    // 如果路由存在参数变化、title动态解析的场景，订阅data流即可实时更新
    this.route.data.subscribe(data => {
      this.pageTitle = data[ROUTE_TITLE];
    });
  }
}

适配自定义TitleStrategy场景说明 #

用ROUTE_TITLE常量拿到的title值，和自定义TitleStrategy中updateTitle方法接收到的第一个入参完全一致，就是你在路由配置里写的原始title（如果用了title解析器/函数，会是解析完成后的最终字符串），不会带上你拼接的 | ${companyName}后缀，页面内展示的标题和传给标题策略的原始值完全同源，不会出现不同步问题。

注意事项 #

• 禁止手动写Symbol('RouteTitle')做索引，必须使用官方导出的ROUTE_TITLE常量，避免Angular版本迭代内部标识变更导致代码失效
• 嵌套路由场景下如果要取对应层级路由的title，遍历this.route.pathFromRoot数组，逐层读取data中的ROUTE_TITLE值即可
• 该方式完全兼容Angular14及以上版本的路由title配置规则，支持静态字符串、动态函数、Resolve解析器三种title配置形式

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