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

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

*使用Angular 2 CLI

Answer 1

标题可以使用Title服务设置

为了从当前路线获得标题，可以使用data属性。

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

刚刚findhttps://github.com/angular/angular/issues/9662#issuecomment-229034288 ，其中展示了类似的方法。

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

Answer 2

下面的代码（来自： 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'])); } } 

Answer 3

您可以直接从组件的构造函数中使用标题服务来设置标题：