Angular 2 利用Router事件和Title实现动态页面标题的方法


Posted in Javascript onAugust 23, 2017

Angular2 为我们提供了名为Title的Service用于修改和获取页面标题,但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了,不符合Angular2高(zhuang)大(bi)的身影。我们想要的结果是在页面改变时能够动态地改变页面标题,如此最好的解决方案就是组合使用Router事件和Title Service。

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应该有某些操作页面标题的方法,不管通过查找文档还是查找源码我们都能很容易知道其只有两个方法:

  • getTitle() 用于获取当前当前页面的标题
  • setTitle(newTitle: String) 用于设置当前页面的标题

如果只是简单地静态地设置页面标题,则可以在ngOnInit方法中直接使用setTitle方法:

// import bala...
@Component({})
export class AppComponent implements OnInit {
  constructor(private titleService: Title) {
    // 使用this.title到处浪
  }

  ngOnInit() {
    this.titleService.setTitle('New Title Here');
  }
}

在ngOnInit中使用setTitle方法设置文档标题是较好的时机,当然也可以根据自己的需求在任意地方使用setTitle方法。

Router和Router事件

使用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到处浪
  }
}

Router配置

Angular2中通过URL、Router和Component之间的对应关系进行页面之间的跳转,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', component: RepoListComponent,
    children: [
     { path: '', component: RepoDetailComponent, data: {title: 'Repo'} },
     { path: ':repo', component: RepoDetailComponent, data: {title: 'RepoDetail'} }
    ]
   }]
 },
 { path: 'contact', component: ContactComponent, data: {title: 'Contact-Liu'} }
];

注意路径和组件之间的对应关系,并且为了能够在Router事件中获取到页面标题,我们在路由表中,为一些页面提供了数据data,并在data中设置了表示页面标题的title属性。

Router事件

利用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, NavigationEnd, 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']));
 }
}

参考文档

Angular2 路由指导

Angualr2 ActivatedRoute文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ui插件的使用方法代码实例
May 08 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Bootstrap表单布局
Jul 19 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 #Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 #Javascript
bootstrap fileinput实现文件上传功能
Aug 23 #Javascript
jQuery Position方法使用和兼容性
Aug 23 #jQuery
详解EasyUi控件中的Datagrid
Aug 23 #Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 #Javascript
Bootstrap table使用方法记录
Aug 23 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python中的全局变量用法分析
2015/06/09 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python中列表和元组的区别
2017/12/18 Python
Python3 log10()函数简单用法
2019/02/19 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python 安装impala包步骤
2020/03/28 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
考研复习计划
2015/01/19 职场文书
单身证明格式样本
2015/06/15 职场文书
浅谈python中的多态
2021/06/15 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
介绍一下28个JS常用数组方法
2022/05/06 Javascript