qrcode

马上订阅,开启修仙之旅

Angular Title Service 详解

Title Service 简介

Angular Title Service 用于获取和设置当前 HTML 文档的标题。Title Service 提供了以下方法:

首先要使用 Title 服务,我们需要从 @angular/platform-browser 库导入 Title 类,然后利用 Angular 依赖注入的机制,通过构造注入的方式注入 Title 服务:

1
2
3
4
5
6
7
8
9
10
11
12
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()

setTitle(newTitle: string)

该方法用于设置当前 HTML 文档的标题,它接收一个参数:

  • newTitle:标题文本
1
2
3
setTitle() {
this.title.setTitle("前端修仙之路");
}

getTitle()

getTitle(): string

该方法用于获取当前 HTML 文档的标题:

1
2
3
getTitle() {
console.log(this.title.getTitle());
}

Title Service API 很简单,以下是完整的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 属性的对象,比如:

1
2
3
4
5
6
7
8
9
10
11
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 类及构造函数

1
2
3
4
@Injectable({providedIn: 'root', useFactory: createTitle, deps: []})
export class Title {
constructor(@Inject(DOCUMENT) private _doc: any) {}
}

通过观察 Injectable 装饰器的 Meta 元信息,我们知道 Meta 服务将被注册在根级注入器中,当首次获取 Title 服务时,将使用 createTitle() 工厂方法创建对应的实例。

1
2
3
4
5
import {Inject, Injectable, inject} from '@angular/core';

export function createTitle() {
return new Title(inject(DOCUMENT));
}

setTitle()

1
2
3
setTitle(newTitle: string) { 
getDOM().setTitle(this._doc, newTitle);
}

以上代码通过调用 getDOM() 方法获取 DomAdapter 对象,然后调用该对象的 setTitle() 方法设置当前页面的标题。

getTitle()

1
2
3
getTitle(): string { 
return getDOM().getTitle(this._doc);
}

参考资源


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode