使用Angular 2新路由器更改页面标题

Question

使用新路由器时，在浏览器中更改应用页面标题的正确方法是什么？

*采用了棱角分明2 CLI

Answer 1

标题可以使用Title service

要想从目前的标题设置可以使用data路由属性。

Plunker example

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

刚刚发现https://github.com/angular/angular/issues/9662#issuecomment-229034288其中表现出了类似的方法。

我还发现https://toddmotto.com/dynamic-page-titles-angular-2-router-events有点漂亮的代码。

Answer 2

您可以直接从您的组件的构造函数中设置与title service标题：

Answer 3

下面的代码（摘自：https://toddmotto.com/dynamic-page-titles-angular-2-router-events）的作品就像一个魅力：

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

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