Javascript 角度检测路由更改上的动态页面标题

我有一个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/platform浏览器中的
Title
类

进口声明

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

将其注入构造函数中

constructor(private title:Title){ }

您的
路由器
事件订阅如下所示

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

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

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

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

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

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

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

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

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

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

或者更好，如其中一个答案所示：

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

如果您使用纯javascript在应用程序构造函数中执行此操作会怎么样

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



您可以使用root提供的服务设置页面标题并订阅同一服务中的更改。您可以插入Angular framework提供的标题服务，它有一个函数getTitle（），该函数提供当前组件的标题。更多信息-结果似乎是same@NikNik我不明白你的问题，即使你使用标题类，如你所示，问题仍然存在