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

            
            declare let document: any;
        

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

@Injectable()
export class HogeService {
    constructor(
        @Inject(DOCUMENT) private document: 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();
    }

}