change - router events subscribe angular 4

Cambiar el título de la página usando el nuevo enrutador angular 2

Question

Esta pregunta ya tiene una respuesta aquí:

• cómo cambiar el título de la página en angular2 router 12 respuestas

¿Cuál es la forma correcta de cambiar el título de la página de la aplicación en el navegador cuando se usa el nuevo enrutador ?

* Usando Angular 2 CLI

Answer 1

El siguiente código (tomado de: https://toddmotto.com/dynamic-page-titles-angular-2-router-events ) funciona como un amuleto:

const routes: Routes = [{
  path: ''calendar'',
  component: CalendarComponent,
  children: [
    { path: '''', redirectTo: ''new'', pathMatch: ''full'' },
    { path: ''all'', component: CalendarListComponent, data: { title: ''My Calendar'' } },
    { path: ''new'', component: CalendarEventComponent, data: { title: ''New Calendar Entry'' } },
    { path: '':id'', component: CalendarEventComponent, data: { title: ''Calendar Entry'' } }
  ]
}];

y luego el AppComponent

import ''rxjs/add/operator/filter'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/mergeMap'';

import { Component, OnInit } from ''@angular/core'';
import { Router, NavigationEnd, ActivatedRoute } from ''@angular/router'';
import { Title } from ''@angular/platform-browser'';

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter(route => route.outlet === ''primary'')
      .mergeMap(route => route.data)
      .subscribe((event) => this.titleService.setTitle(event[''title'']));
  }
}

Answer 2

Puede establecer el título con el servicio de título directamente desde el constructor de su componente:

Answer 3

El título se puede configurar usando el servicio de Title

Para obtener el título de la ruta actual, se puede usar la propiedad de data .

Ejemplo de Plunker

const routes: RouterConfig = [
    {
        path: '''',
        redirectTo: ''/login'',
        pathMatch: ''full'',
    },
    {
        path: ''login'',
        component: LoginComponent,
        data: {title: ''Login''}
    },
    {
        path: ''home'',
        component: HomeComponent,
        data: {title: ''Home''}
    },
    {
        path: ''wepays'',
        component: WePaysComponent,
        data: {title: ''WePays''}
    }
];

export class AppComponent { 
  constructor(titleService:Title, router:Router, activatedRoute:ActivatedRoute) {
    router.events.subscribe(event => {
      if(event instanceof NavigationEnd) {
        var title = this.getTitle(router.routerState, router.routerState.root).join(''-'');
        console.log(''title'', title);
        titleService.setTitle(title);
      }
    });
  }

  // collect that title data properties from all child routes
  // there might be a better way but this worked for me
  getTitle(state, parent) {
    var data = [];
    if(parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.push(parent.snapshot.data.title);
    }

    if(state && parent) {
      data.push(... this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }
}

Acabo de encontrar https://github.com/angular/angular/issues/9662#issuecomment-229034288 donde se demuestra un enfoque similar.

También encontré https://toddmotto.com/dynamic-page-titles-angular-2-router-events con un código más bonito.