Angular TIPS
コンポーネントからページのタイトルを操作するには？（Title）
Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。
コンポーネントのテンプレート（templateパラメーター）は、基本的には、標準的なHTMLの拡張です。よって、ほとんどのHTMLタグは、テンプレートの中でもそのまま利用できます。
「ほとんど」とは、わずかながら利用できない要素もあるということです。その代表は、ページの外枠を表す<html>、<head>（と、その配下の要素）、<body>などの要素です。コンポーネントがあくまでページの断片を表す要素であることを考えれば、これは当然ですね。
とはいえ、コンポーネントからページのタイトルを操作したい（変更したい）ということはよくあります。そこで登場するのが、Titleサービスです。Titleサービスを利用することで、コンポーネントからページタイトルを設定することが可能になります。繰り返しですが、テンプレートに<title>要素を加えても無視されるだけで、ページタイトルは変更されないので注意してください。
［Note］
その他、テンプレート上では、<script>要素も利用できません（こちらは<title>要素などと異なり、テンプレートが処理される際に除去されます）。テンプレートに何らかの動的な操作を加えたい場合には、Angular標準のEvent Bindingを利用します。
具体的な例も見てみましょう。以下は、コンポーネントを描画する際に、ページタイトルも「Angular TIPS - Titleサービスの例」と変更する例です。
|
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template: `<h1>Hello {{name}}</h1>`,
styleUrls: ['./app.component.css'],
providers: [ Title ] // 1Titleサービスを登録
})
export class AppComponent {
// 2Titleサービスを注入
constructor(private title: Title) {
// 3ページタイトルを設定
this.title.setTitle('Angular TIPS - Titleサービスの例');
}
name = 'Angular';
}
|
サービスを有効化するには、providersパラメーターで使用するサービスを登録した上で（1）、対応するサービスをコンストラクターに引き渡します（2）。これによって、コンポーネントをインスタンス化するタイミングで、サービスがコンポーネントに引き渡されます*1。
- *1 この仕組みを「依存性注入」と言います。サービス導入に関する詳細は、後日別稿で解説します。
あとは、コンストラクターの中でTitleサービスのsetTitleメソッドを呼び出すことで（3）、ページタイトルを更新できます。
なお、現在のページタイトルを取得するならば、this.title.getTitle()のようにします。
処理対象：Title カテゴリ：サービス（Service）
API：Title カテゴリ：@angular > platform-browser > CLASS（クラス）
※以下では、本稿の前後を合わせて5回分（第38回～第42回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
40. 【現在、表示中】≫ コンポーネントからページのタイトルを操作するには？（Title）
Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。
41. コンポーネント要素に属性／イベントをバインドするには？（hostパラメーター）
@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。
