0%

Angular如果设置Title和Meta信息

发表于 更新于
本文字数： 2.1k 阅读时长 ≈ 2 分钟

1. 前言

我们在项目中有的时候想要动态设置网页的title，有的时候会根据某种需求去动态设置meta信息，那么在SPA的Angular中如何做到呢？（PS：当然你可能会想，直接写javascript脚本修改不就OK了？！，下面要讨论的是如何用Angular的方式去修改。）

2. 如何修改网页的Title呢？

Angular在platform-browser包中为我们提供了一个Title服务，我们可以通过这个服务做到动态修改Title。

话不多说，直接上代码：

1
// Html
2
3
请输入你要设置的Title值：<input #titleInput>
4
<br>
5
<button (click)="dynamicSetTitle(titleInput.value)">点击我设置Title</button>
6
7
-----------------------------------------
8
9
// TS
10
11
import { Component } from '@angular/core';
12
import { Title } from '@angular/platform-browser'; // 引入包依赖
13
14
15
@Component({
16
  selector: 'my-app',
17
  templateUrl: './app.component.html',
18
  styleUrls: [ './app.component.css' ]
19
})
20
export class AppComponent  {
21
22
  constructor(
23
    private titleService: Title // 注入Title服务
24
  ) { }
25
26
  // 根据输入框输入的文本内容动态设置Title值
27
  dynamicSetTitle(title: string): void {
28
    this.titleService.setTitle(title);
29
  }
30
31
}

是不是很easy！

3. 如何修改Meta信息？

Angular在platform-browser包中为我们提供了一个Meta服务，我们可以通过这个服务做到动态修改Meta。

话不多说，直接上代码：

1
import { Component } from '@angular/core';
2
import { Meta } from '@angular/platform-browser'; // 引入包依赖
3
4
5
@Component({
6
  selector: 'my-app',
7
  templateUrl: './app.component.html',
8
  styleUrls: [ './app.component.css' ]
9
})
10
export class AppComponent  {
11
12
  constructor(
13
    private metaService: Meta
14
  ) {
15
    this.metaService.updateTag({
16
      name: 'description', content: '我动态设置的描述信息～'
17
    });
18
  }
19
20
}

OK，是不是也很简单呢？当然Meta服务提供的方法还有很多，具体如下：

1
class Meta {
2
  addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement | null
3
  addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[]
4
  getTag(attrSelector: string): HTMLMetaElement | null
5
  getTags(attrSelector: string): HTMLMetaElement[]
6
  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null
7
  removeTag(attrSelector: string): void
8
  removeTagElement(meta: HTMLMetaElement): void
9
}

4. stackblitz在线Demo

https://stackblitz.com/edit/angular-title-meta-demo