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.AsyncBox 弹出对话框插件
Aug 29 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 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创建sprite
2014/02/11 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php绘制一条直线的方法
2015/01/24 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python实现简单图书管理系统
2019/11/22 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
监督检查工作方案
2014/05/28 职场文书
运动会广播稿20字
2015/08/19 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书