Angular Title Service 详解
Title Service 简介
Angular Title Service 用于获取和设置当前 HTML 文档的标题。Title Service 提供了以下方法：
首先要使用 Title 服务，我们需要从 @angular/platform-browser 库导入 Title 类，然后利用 Angular 依赖注入的机制，通过构造注入的方式注入 Title 服务：
import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";
@Component({
selector: "app-root",
template: `
<h3>Angular Title Service</h3>
`
})
export class AppComponent {
constructor(public title: Title) {}
}setTitle()
该方法用于设置当前 HTML 文档的标题，它接收一个参数：
- newTitle：标题文本
setTitle() {
this.title.setTitle("前端修仙之路");
}getTitle()
该方法用于获取当前 HTML 文档的标题：
getTitle() {
console.log(this.title.getTitle());
}Title Service API 很简单，以下是完整的示例：
import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";
@Component({
selector: "app-root",
template: `
<h3>Angular Title Service</h3>
<button (click)="setTitle()">Set Page Title</button>
<button (click)="getTitle()">Get Page Title</button>
`
})
export class AppComponent {
constructor(public title: Title) {}
setTitle() {
this.title.setTitle("前端修仙之路");
}
getTitle() {
console.log(this.title.getTitle());
}
}Title Service 实战
在 SPA 单页应用的开发过程中，经常需要根据不同的路由显示不同的标题，即动态地设置页面的标题。针对这种需求，我们可以通过订阅路由事件，然后在页面导航成功后，利用 Title 服务动态设置页面的标题或 Meta 信息。
this.router.events.subscribe((event: any) => {
if (event instanceof NavigationEnd) {
switch (event.urlAfterRedirects) {
case '/':
this.meta.updateTag({
name: 'description',
content: 'Angular Example app with Angular CLI, Angular Material and more'
});
break;
case '/' + AppConfig.routes.heroes: // routes: { heroes: 'heroes' },
this.title.setTitle('Heroes list');
this.meta.updateTag({
name: 'description',
content: 'List of super-heroes'
});
break;
}
}
});示例来源于 —— angular6-example-app ，该示例主要介绍了如何利用路由事件来动态设置页面的标题。而实际的开发过程中，我们会在定义路由时，为需要设置标题的路由，定义一个 data 属性，然后设置该属性对应的属性值为一个包含 title 属性的对象，比如：
const routes: Routes = [
{
path: '',
component: HomeComponent,
data: { title: "My Home Page" },
},
{
path: 'detail/:id',
component: DetailComponent,
}
];之后，我们只要在激活当前页面的时候，获取对应的路由配置，就可以利用 Title 服务来改变当前页面的标题。此外在实际的开发中，可能会遇到一些复杂的场景，比如子路由、多层嵌套路由等。针对这种情形，建议有需要的同学认真阅读一下 Todd Motto 大神 dynamic-page-titles-angular-2-router-events 这篇文章，虽然使用的是 Angular 2.x 版本，但核心的思想是一致的，大家只需根据当前使用的 Angular 版本进行相应的代码更新。
Title Service 源码简析
Title 类及构造函数
@Injectable({providedIn: 'root', useFactory: createTitle, deps: []})
export class Title {
constructor(@Inject(DOCUMENT) private _doc: any) {}
}通过观察 Injectable 装饰器的 Meta 元信息，我们知道 Meta 服务将被注册在根级注入器中，当首次获取 Title 服务时，将使用 createTitle() 工厂方法创建对应的实例。
import {Inject, Injectable, inject} from '@angular/core';
export function createTitle() {
return new Title(inject(DOCUMENT));
}setTitle()
setTitle(newTitle: string) {
getDOM().setTitle(this._doc, newTitle);
}以上代码通过调用 getDOM() 方法获取 DomAdapter 对象，然后调用该对象的 setTitle() 方法设置当前页面的标题。
getTitle()
getTitle(): string {
return getDOM().getTitle(this._doc);
}参考资源
腾讯云开发者
