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文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Angular  # 实现动态页面标题  # 动态标题  # Angularjs 动态改变title标题(兼容ios)  # 路由表  # 文档  # 是在  # 要注意  # 还需要  # 要将  # 而这  # 中为  # 自己的  # 还没有  # 最好的  # 都能  # 遍历  # 并在  # 很容易  # 感兴趣  # 可以通过  # 较好  # 这对  # 很重要 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用Telescope进行调试？（安装和使用教程）  网站制作软件免费下载安装,有哪些免费下载的软件网站？  长沙做网站要多少钱,长沙国安网络怎么样？  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  无锡营销型网站制作公司,无锡网选车牌流程？  python中快速进行多个字符替换的方法小结  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  网站建设要注意的标准 促进网站用户好感度！  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  历史网站制作软件,华为如何找回被删除的网站？  如何在服务器上配置二级域名建站？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  PythonWeb开发入门教程_Flask快速构建Web应用  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  长沙企业网站制作哪家好,长沙水业集团官方网站？  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  Android滚轮选择时间控件使用详解  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  IOS倒计时设置UIButton标题title的抖动问题  详解jQuery中基本的动画方法  非常酷的网站设计制作软件,酷培ai教育官方网站？  如何快速配置高效服务器建站软件？  如何在景安云服务器上绑定域名并配置虚拟主机？  Laravel如何配置任务调度？（Cron Job示例）  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  linux top下的 minerd 木马清除方法  如何快速搭建高效可靠的建站解决方案？  香港服务器WordPress建站指南：SEO优化与高效部署策略  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Python自动化办公教程_ExcelWordPDF批量处理案例  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  公司网站制作需要多少钱,找人做公司网站需要多少钱？  大型企业网站制作流程,做网站需要注册公司吗？  jquery插件bootstrapValidator表单验证详解  bing浏览器学术搜索入口_bing学术文献检索地址  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  详解Huffman编码算法之Java实现  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  如何在云主机快速搭建网站站点？  如何在建站宝盒中设置产品搜索功能？