JavaScript
Angular5

Angular2/5 ページタイトルをパスに対応したものに動的に変更する

環境

Angular 5.2.5
Angular version2 以上

前提

コンポーネント等は作成しているものとする。
/src/app/AにAコンポーネント、/src/app/BにBコンポーネントが存在するものとする。
また、/src/app直下にapp.component.ts、app.module.tsが任意の形で存在するものとする。

ルーターの準備

/src/appディレクトリに以下の内容のファイルapp.routes.tsを作成する。

app.routes.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AComponent } from './A/A.component';
import { BComponent } from './B/B.component';

export const router: Routes = [
{
    {
        path: 'A',
        component:AComponent,
        data: { title: 'タイトル:A' }
    },
        {
        path: 'B',
        component:BComponent,
        data: { title: 'タイトル:B' }
    }
]

export const APP_ROUTES: ModuleWithProviders = RouterModule.forRoot(router);

data.titleはページタイトルである(data:{}は各ルートにカスタムオブジェクトを追加する機能である)。パスAにアクセスするとAコンポーネントが表示される。

/src/appディレクトリにあるapp.module.tsを編集する。

app.module.ts
 ...

import { APP_ROUTES } from './app.routes';

 ...
@NgModule({

 ...
    imports: [
        APP_ROUTES,
 ...
    ]
 ...
})

動的タイトルの設定

/src/appディレクトリにあるapp.component.tsを編集する。

app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private router: Router, private activatedRoute: ActivatedRoute, private titleService: Title) {}
    // tslint:disable-next-line:use-life-cycle-interface
    ngOnInit() {
        this.router.events
            .filter(event => event instanceof NavigationEnd)
            .map(() => this.activatedRoute)
            .map(route => {
                while (route.firstChild) {
                    route = route.firstChild;
                }
                return route;
            })
            .filter(route => route.outlet === 'primary')
            .mergeMap(route => route.data)
            .subscribe(event => this.titleService.setTitle(event['title']));
    }
}

this.router.event ~ subscribe ~ でルータのイベントを読み込む。
NavigationEndでイベントをフィルターする。

このようにして動的にタイトルを変更することが出来ます。