Angular 14 组件中的访问路由配置标题属性

Question

route.snapshot.data是否可以从 Angular 14 中的routeConfig中读取标题？我可以在route.snapshot.data作为Symbol中看到它，但似乎无法访问它：

{
  path: 'example',
  title: 'Title of Page',
  component: ExamplePage
}

this.route.snapshot.data[Symbol('RouteTitle')]) // undefined
console.log(this.route.snapshot.data) // { Symbol('RouteTitle'): 'Title of Page' }

我正在使用 TitleStrategy 将标题更新为：

${title} | ${companyName}`

但希望获取组件中的预策略标题以在页面中使用，以便它们匹配，而无需每次使用Title服务getTitle和切片。companyName

Answer 1

title从 获取，snapshot.routeConfig它返回Route包含快照的title：

{
  path: 'example',
  title: 'Title of Page',
  component: ExamplePage
}

@Component({/* Configuration */})
export class ExamplePage implements OnInit {

  constructor(private readonly route: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.route.snapshot.routeConfig?.title);
    // Output: Title of Page
  }
}