AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方


2022/04/26

AngularでHTMLページのタイトルを任意の場所から書き換えるメソッドとして利用したい場合、そのものズバリでビルドインで提供されている
Titleサービスを利用できます。

そもそもはAngularに限らず汎用的にJavascriptコードで呼び出す際には、
Document APIからdocument.titleプロパティよりページタイトルを書き換えることができます。

document APIをAngularでも使えるようにする方法にはいくつかありますが、たとえば変数定義をTypescriptソースコードのグローバルスコープ内におくことで
documentを呼び出すことも出来るでしょう。

            
            declare let document: any;
        

この用法だとお世辞にもAngularらしい作法とは言えません。とりあえずブラウザでやっつけで動けばいいや的な発想の少々乱暴なテクニックです。

Angular的な作法だとdocument APIによるフルコントロールを得たい場合には、
@angular/commonからDOCUMENT変数をDIすることでサービスとして提供することをができます。

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

@Injectable()
export class HogeService {
    constructor(
        @Inject(DOCUMENT) private document: Document
    ) {}

    //...
}
        
今回の狙いとして、ページタイトル書き換えるだけなので、わざわざdocumentインスタンスを引き出して操作させるほどでもないという用途に適しているのがTitleサービスです。


TitleサービスからHTMLページタイトルの書き換え

AngularビルドインのTitleサービスを使うと、@angular/common:DOCUMENTをDIするクラスを用意する必要もなく、直接任意のコンポーネントに読み込んで利用することが可能です。

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

}
        
documentに直接アクセスしなくて良くなるので、冒頭で挙げた方法よりもより可読性が上がります。


参考サイト

Set the document title

How to set a document title in Angular app

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。