大佬教程收集整理的这篇文章主要介绍了Angular 2 利用Router事件和Title实现动态页面标题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Angular2 为我们提供了名为title的service用于修改和获取页面标题，但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我们想要的结果是在页面改变时能够动态地改变页面标题，如此最好的解决方案就是组合使用Router事件和title service。
使用service自然首先要将其引入，不过要注意title service并不在@angular/core中，而是在@angular/platform-browser中：
import { title } from '@angular/platform-browser';
引入之后，自然要将其注入到当前组件中，而这通常利用constructor完成：
import { title } from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component({})
export class AppComponent {
constructor(private titleservice: titlE) {
// 使用this.title到处浪
}
}
很显然，title service应该有某些操作页面标题的方法，不管通过查找文档还是查找源码我们都能很容易知道其只有两个方法：
如果只是简单地静态地设置页面标题，则可以在ngOnInit方法中直接使用settitle方法：
// import bala...
@Component({})
export class AppComponent implements OnInit {
constructor(private titleservice: titlE) {
// 使用this.title到处浪
}
ngOnInit() {
this.titleservice.settitle('New title Here');
}
}
使用Router和使用title service流程基本一致，先引入后注入，不过要注意Router和title service类似并不位于@angular/core中，而是位于@angular/router中：
import { title } from '@angular/platform-browser';
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({})
export class AppComponent {
constructor(private titleservice: title,private router: Router) {
// 使用this.title和this.router到处浪
}
}
Angular2中通过URL、Router和Component之@L_772_25@对应关系进行页面之@L_772_25@跳转，Router把浏览器中的URL看做一个操作指南，据此可导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件。所以我们需要定义路由表：
// import bala...
export const rootRouterConfig: Routes = [
{ path: '',redirectTo: 'home',pathMatch: 'full'},{ path: 'home',component: HomeComponent,data: {title: 'Home-Liu'} },{ path: 'about',component: AboutComponent,data: {title: 'About-Liu'} },{ path: 'github',component: RepoBrowserComponent,children: [
{ path: '',component: RepoListComponent,data: {title: 'GitHub List'} },{ path: ':org',children: [
{ path: '',component: RepoDetailComponent,data: {title: 'Repo'} },{ path: ':repo',data: {title: 'RepoDetail'} }
]
}]
},{ path: 'contact',component: ContactComponent,data: {title: 'Contact-Liu'} }
];
注意路径和组件之@L_772_25@对应关系，并且为了能够在Router事件中获取到页面标题，我们在路由表中，为一些页面提供了数据data，并在data中设置了表示页面标题的title属性。
利用Router事件我们就可以实现动态改变页面标题的目的，不过放置的位置很重要，我们这里选择在AppComponent的ngOnInit方法中利用subscribe订阅Router事件，因为AppComponent是根组件，所以能够订阅所有Router事件：
ngOnInit() {
this.router.events
.subscribe((event) => {
console.log(event); // 包括NavigationStart,RoutesRecognized,NavigationEnd
});
}
当然我们这里这对NavigationEnd事件感兴趣：
import {ActivatedRoutE} from '@angular/router';
// import bala...
// other codes
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('NavigationEnd:',event);
}
});
}
当然使用这种判断筛选的方式并没有错，但是在现在的前端世界里显得不够优雅，我们应该使用RxJS中的filter达到我们的目的：
import 'rxjs/add/operator/filter';
// import bala...
// other codes
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd) // 筛选原始的Observable：this.router.events
.subscribe((event) => {
console.log('NavigationEnd:',event);
});
}
当然，我们如果想要动态改变某个页面的标题，就需要获取到当前被展示的页面对应的路由信息，而这可以通过ActivatedRoute得到，其使用方式和title service及Router类似，不再赘述：
import { title } from '@angular/platform-browser';
import {Component,OnInit} from '@angular/core';
import {Router,NavigationEnd,ActivatedRoutE} from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
@Component({})
export class AppComponent implements OnInit {
constructor(private titleservice: title,private router: Router,private activatedRoute: ActivatedRoutE) {
// 使用this.title和this.router和this.activatedRoute到处浪
}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoutE) // 将filter处理后的Observable再次处理
.subscribe((event) => {
console.log('NavigationEnd:',event);
});
}
}
注意这里我们又使用了RxJS中的map来更优雅地达成我们目的。
看起来我们已经完(luo)成(suo)很多事情了，但是还不够，我们目前还没有处理子路由，即我们上文路由配置中的children属性，所以我们还需要遍历路由表以便获取到每一个页面对应的路由信息：
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoutE)
.map((routE) => {
while(route.firstChild) {
route = router.firstChild;
}
return route;
})
.subscribe((event) => {
console.log('NavigationEnd:',event);
});
}
最后，我们还需要获取到我们在路由表中为每个路由传入的data信息，然后再利用title service设置页面标题：
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoutE)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.mergeMap(route => route.data)
.subscribe((event) => this.titleservice.settitle(event['title']));
}
下面是完成的最终代码，或者也可以到GitHub上查看完整代码：
import { Component,OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { title } from '@angular/platform-browser';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@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']));
}
}
以上是大佬教程为你收集整理的Angular 2 利用Router事件和Title实现动态页面标题全部内容，希望文章能够帮你解决Angular 2 利用Router事件和Title实现动态页面标题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。