角度检测路由更改时的动态页面标题答案

【问题标题】：Angular detect dynamic page title on route change角度检测路由更改时的动态页面标题
【发布时间】：2020-02-01 18:07:31
【问题描述】：

我有一个 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);
      }
  });
    }

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

有什么建议可以解决这个问题吗？

【问题讨论】：

您可以使用根提供的服务来设置页面的标题并订阅同一服务中的更改
你可以注入Angular框架提供的Title服务，它有一个函数getTitle()给出当前组件的标题。更多信息 - angular.io/guide/set-document-title

标签： javascript html angular angular6

【解决方案1】：

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

进口声明

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())
      }
  });

【讨论】：

看来结果是一样的
@NikNik 我不明白你的问题
即使你使用了如图所示的Title类，问题依然存在

【解决方案2】：

我认为您尝试在组件级别重置文档标题之前访问它。

当你导航到一个路由时，路由器会发出一个事件，然后组件被初始化，如果我理解正确，你的标题将在这里重置。

您可以在路线中提供标题数据，例如：

const routes: Routes = [
    {
        path: 'my/route',
        component: MyComponent,
        data: {
           documentTitle: 'YOUR TITLE'
        }
    }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class MyRouterModule { }

【讨论】：

【解决方案3】：

如果你在你的应用程序构造函数中使用纯 javascript 会怎样

 new MutationObserver(function(mutations) {
    console.log(mutations[0].target.nodeValue);
}).observe(
    document.querySelector('title'),
    { subtree: true, characterData: true }
);

demo

reference so1 reference 2

【讨论】：

【解决方案4】：

您可以在孩子的组件构造函数中设置标题：

constructor() { 
    document.title =  "newTitle";
}

甚至更好，正如其中一个答案所建议的那样：

constructor(private titleService: Title) { 
    this.titleService.setTitle("newTitle");
}

【讨论】：