如何使用路由数据在 Angular 8 中设置动态页面标题

Question

如何使用组件中的路由数据在 Angular 8 中设置动态页面标题？

Answer 1

您可以像这样从快照访问路由的数据属性：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor(private titleService: Title, private route: ActivatedRoute) {
      this.titleService.setTitle(this.route.snapshot.data['title']);
    } 

}

这需要注入 ActivatedRoute，然后访问路由的快照。您可以使用快照而不是订阅，因为数据是静态的。

在 Angular 中查看 titleService 的链接：https ://angular.io/guide/set-document-title 。

希望这可以帮助。