Modifica del titolo della pagina utilizzando il nuovo router Angular 2

Qual è il modo giusto per modificare il titolo della pagina dell’app nel browser quando si utilizza il nuovo router ?

* Usando la CLI Angular 2

Il titolo può essere impostato utilizzando il servizio Title

Per ottenere il titolo dal percorso corrente, è ansible utilizzare la proprietà dei data .

Esempio di 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; } } 

Ho appena trovato https://github.com/angular/angular/issues/9662#issuecomment-229034288 dove viene dimostrato un approccio simile.

Ho anche trovato https://toddmotto.com/dynamic-page-titles-angular-2-router-events con bit un codice più bello.

Il seguente codice (tratto da: https://toddmotto.com/dynamic-page-titles-angular-2-router-events ) funziona come un incantesimo:

 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' } } ] }]; 

e quindi 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'])); } } 

Puoi impostare il titolo con il servizio titolo direttamente dal costruttore del tuo componente: