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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
js对象的比较
2011/02/26 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python自动发送邮件脚本
2018/06/20 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Python内置函数及功能简介汇总
2020/10/13 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
小学新教师培训方案
2014/02/03 职场文书
大学生活动总结模板
2014/07/02 职场文书
先进工作者申报材料
2014/12/23 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
如何使用flask将模型部署为服务
2021/05/13 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android