Динамическое определение динамического заголовка страницы при изменении маршрута

Question

У меня есть угловое приложение, в котором я хочу сохранять заголовок страницы при каждом изменении маршрута,

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

Что если вы сделаете это, используя чистый javascript, то есть в конструкторе вашего приложения

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

demo

reference so1 reference2

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

Вы можете использовать класс 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())
      }
  });