专栏首页全栈修仙之路Angular Title Service 详解

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()

setTitle(newTitle: string)

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

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

getTitle()

getTitle(): string

该方法用于获取当前 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); 
}

参考资源

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入学习 Node.js Module

    Node.js 遵循 CommonJS规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 mo...

    阿宝哥
  • Sequelize 系列教程之多对多模型关系

    Sequelize 是一个基于 Promise 的 Node.js ORM,目前支持 Postgres、MySQL、SQLite 和 Microsoft SQL...

    阿宝哥
  • 如何快速开发 CLI,Oclif 了解一下

    CLI(Command Line Interface)命令行界面是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算...

    阿宝哥
  • 图解TCP/IP

    2.分组交换:是指将一个大数据分割为一个个叫做包(Packet)的较小单位进行传输的方法

    硬核项目经理
  • CentOS初始化Mysql5.7密码

    /etc/init.d/mysql stop mysqld_safe --user=mysql --skip-grant-tables --skip-netwo...

    Java中文社群-磊哥
  • 浅谈MySQL数据库的Web安全问题 转

    数据安全是现在互联网安全非常重要一个环节。而且一旦数据出现问题是不可逆的,甚至是灾难性的。

    双面人
  • Attention机制的精要总结,附:中英文机器翻译的实现!

    在“编码器—解码器(seq2seq)”⼀节⾥,解码器在各个时间步依赖相同的背景变量来获取输⼊序列信息。当编码器为循环神经⽹络时,背景变量来⾃它最终时间步的隐藏状...

    mantch
  • MySQL 8.0 安装部署3个注意事项

    墨墨导读:本文分享实际案例中MySQL8.0安装部署时最典型的3个问题,希望对大家有帮助。

    数据和云
  • DAY28:阅读如何计算Occupancy

    GPUS Lady
  • html5从0到1-html5的简易数据库开发(18)

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券