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でイベントをフィルターする。

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