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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript中DOM详解
Apr 13 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
简单学习vue指令directive
Nov 03 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
ant design实现圈选功能
Dec 17 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
JavaScript的Cookies
2008/01/16 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
使用Python绘制图表大全总结
2017/02/11 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
解决Django连接db遇到的问题
2019/08/29 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
领导证婚人证婚词
2014/01/13 职场文书
小学生作文评语
2014/04/18 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书