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

Answer 2

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

当您导航到某个路由时，路由器会发出一个事件，此后初始化该组件，并且如果我对您的理解正确的话，标题将在此处重置。

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

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

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

Answer 3

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

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

或什至更好，如答案之一所示：

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

Answer 4

如果您使用纯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 个答案: