カテゴリー
AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方
※ 当ページには【広告/PR】を含む場合があります。
2022/04/26
document.titleプロパティ
document
declare let document: any;
@angular/common
DOCUMENT
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable()
export class HogeService {
constructor(
@Inject(DOCUMENT) private document: Document
) {}
//...
}
Title
TitleサービスからHTMLページタイトルの書き換え
Titleサービス
@angular/common:DOCUMENT
import { Component, ngInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-hoge-compo',
template: `
<div class="hoge">
HELLO, HOGE!
</div>
`,
styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements {
constructor(
//👇Titleサービスを使う
private title: Title
) {}
ngOnInit() {
//👇Titleを変更
this.title.setTitle('タイトルが自由に変わります');
}
}
import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Injectable({
providedIn: 'root'
})
export class HogeService {
constructor(
//👇Titleサービスを使う
private title: Title
) { }
setTitle(title: string) {
this.title.setTitle(title);
}
getTitle(): string {
return this.title.getTitle();
}
}
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー