Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

コンポーネントからページのタイトルを操作するには?(Title)

2018年2月5日

Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。

  • このエントリーをはてなブックマークに追加

 コンポーネントのテンプレート(templateパラメーター)は、基本的には、標準的なHTMLの拡張です。よって、ほとんどのHTMLタグは、テンプレートの中でもそのまま利用できます。

 「ほとんど」とは、わずかながら利用できない要素もあるということです。その代表は、ページの外枠を表す<html><head>(と、その配下の要素)、<body>などの要素です。コンポーネントがあくまでページの断片を表す要素であることを考えれば、これは当然ですね。

 とはいえ、コンポーネントからページのタイトルを操作したい(変更したい)ということはよくあります。そこで登場するのが、Titleサービスです。Titleサービスを利用することで、コンポーネントからページタイトルを設定することが可能になります。繰り返しですが、テンプレートに<title>要素を加えても無視されるだけで、ページタイトルは変更されないので注意してください。

[Note]

 その他、テンプレート上では、<script>要素も利用できません(こちらは<title>要素などと異なり、テンプレートが処理される際に除去されます)。テンプレートに何らかの動的な操作を加えたい場合には、Angular標準のEvent Bindingを利用します。

 具体的な例も見てみましょう。以下は、コンポーネントを描画する際に、ページタイトルも「Angular TIPS - Titleサービスの例」と変更する例です。

HTML
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';
}
Titleサービス経由でページタイトルを変更するコード(app.component.ts)
確かにページタイトルが変更されている
確かにページタイトルが変更されている

 サービスを有効化するには、providersパラメーターで使用するサービスを登録した上で(1)、対応するサービスをコンストラクターに引き渡します(2)。これによって、コンポーネントをインスタンス化するタイミングで、サービスがコンポーネントに引き渡されます*1

  • *1 この仕組みを「依存性注入」と言います。サービス導入に関する詳細は、後日別稿で解説します。

 あとは、コンストラクターの中でTitleサービスのsetTitleメソッドを呼び出すことで(3)、ページタイトルを更新できます。

 なお、現在のページタイトルを取得するならば、this.title.getTitle()のようにします。

処理対象:サービス(Service) カテゴリ:基本
処理対象:Title  カテゴリ:サービス(Service)
API:Title カテゴリ:@angular > platform-browser > CLASS(クラス)

※以下では、本稿の前後を合わせて5回分(第38回~第42回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
38. フォームにラジオボタンのリストを設置するには?

選択肢の中から1つを選択する「ラジオボタンのリスト」を設置するための基本的な方法を解説する。

Angular TIPS
39. フォームにチェックボックスのリストを設置するには?

選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説する。

Angular TIPS
40. 【現在、表示中】≫ コンポーネントからページのタイトルを操作するには?(Title)

Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。

Angular TIPS
41. コンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

Angular TIPS
42. 文字列によって表示を切り替えるには?(i18nSelect)

i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!