Angular 检测路线更改时的动态页面标题

Question

我有一个 Angular 6 应用程序，我想在每次路线更改时存储页面标题，

import { Router, NavigationEnd, NavigationStart, RoutesRecognized } from '@angular/router';

export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

    ngOnInit() {
          this.router.events.subscribe(event => {

      if (event instanceof NavigationStart) {
        // console.log('Starting Navigation');
      }

      if (event instanceof NavigationEnd) {
        console.log('Ending Navigation ', document.title);
      }
  });
    }

问题是每当我想访问当前页面的标题时，它都会显示以前的标题集，但不显示从组件级别动态设置的新标题

有什么建议如何解决这个问题吗？

Answer 1

您可以使用Title该类@angular/platform-browser，

进口声明

import{Title} from '@angular/platform-browser'

将其注入构造函数中

constructor(private title:Title){ }

您的router活动订阅将如下所示

this.router.events.subscribe(event => {

      if (event instanceof NavigationStart) {
        // console.log('Starting Navigation');
      }

      if (event instanceof NavigationEnd) {
        alert(this.title.getTitle())
      }
  });