Angular Title Service 详解

Title Service 简介

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

setTitle()
getTitle()

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

代码语言：javascript复制

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：标题文本

代码语言：javascript复制

setTitle() {
  this.title.setTitle("前端修仙之路");
}

getTitle()

getTitle(): string

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

代码语言：javascript复制

getTitle() {
  console.log(this.title.getTitle());
}

Title Service API 很简单，以下是完整的示例：

代码语言：javascript复制

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 信息。

代码语言：javascript复制

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 属性的对象，比如：

代码语言：javascript复制

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 类及构造函数

代码语言：javascript复制

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

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

代码语言：javascript复制

import {Inject, Injectable, inject} from '@angular/core';

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

setTitle()

代码语言：javascript复制

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

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

getTitle()

代码语言：javascript复制

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

参考资源

dynamic-page-titles-angular-2-router-events

html angularjs 网络安全编程算法

0 人点赞