Angular @Component デコレーターの主なパラメーター

はじめに

@Componentデコレーターで、selector、templateUrl、styleUrls、providers、changeDetectionを頻繁に目にするので、それぞれの仕様についてまとめてみる。

@Componentデコレーター内でパラメータは以下のように定義される。

sample.ts

@Component({
  selector: 'app-my-component', /*パラメーター*/
  templateUrl: './my-component.component.html', /*パラメーター*/
  styleUrls: ['./my-component.component.css'], /*パラメーター*/
  providers: [MyService] /*パラメーター*/
})

↑このようなパラメータの設定により、コンポーネントのメタデータを提供し、その動作や表示方法、依存関係などを明示的に定義する。

パラメータ一覧

selector

そのコンポーネントをHTML内で使うためのタグの名前を定義するもの

sample.ts

@Component({
  selector: 'app-my-component',
})

app-my-componentという名前のセレクターを持つコンポーネントは、以下のようにHTMLファイル内でタグ名として使用することで、そのコンポーネントのビューが表示される。

sample.html

<app-my-component></app-my-component>

コンポーネントのビューを定義するのは次に説明するtemplateUrlで行える。

templateUrl

コンポーネントが使用するHTMLテンプレート(ビュー)のURLを指定するためのもの

sample.ts

@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', // HTMLファイルの相対パス
})

上記コンポーネントは、以下のHTMLファイルをビューとして指定している。

sample.component.html

<div>
  <h1>Welcome to Angular!</h1>
</div>

templateUrl以外にも、templateを使用して、テンプレートを直接TypeScriptの文字列として記述することも可能。

以下が両者の違いになる↓

パラメーター	説明	例
templateUrl	外部HTMLファイルを参照	templateUrl: './sample.component.html'
template	直接テンプレートを記述	template: '<div> <h1>Welcome to Angular!</h1> </div>'

styleUrls

コンポーネントのビューに適応するスタイルを定義する

sample.ts

@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', 
  styleUrls: ['./scss-sample.component.scss'] // スタイルファイルの相対パス
})

sample.component.htmlで定義されたビューに、styleUrlsパラメータで scss-sample.component.scssを指定することで、スタイルを適用できる。

また、templateUrl 以外にも、template を使用して、テンプレートを直接 TypeScript の文字列として記述することも可能。

以下が両者の違いになる↓

パラメーター	説明	例
styleUrls	外部のスタイルファイルを参照	styleUrls: ['./scss-sample.component.scss']
styles	直接スタイルを記述	styles: ['h1 { color: blue; }']

providers

providersはコンポーネントが依存するサービスを指定するためのもの。
providers で指定したサービスは、対象のコンポーネントおよびその子コンポーネント内でのみ有効になり、そこで利用できるようになる。

sample.ts

@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', 
  styleUrls: ['./scss-sample.component.scss'],
  providers: [MyService] // ここでMyServiceを提供
})

この providers に MyService を指定すると、このコンポーネントとその子コンポーネントでは新しいMyServiceのインスタンスが作成される。

グローバルにサービスを提供したい場合は、app.module.ts(最上位のコンポーネント) の providers に登録するか、@Injectable({ providedIn: 'root' }) を使う。

changeDetection

変更検出（Change Detection）は、Angularにおいてコンポーネントのデータ変更を検知し、ビューを更新する仕組みである。
Angularはコンポーネントツリーを監視し、データの変更があれば対応するビューが再描画される。

changeDetectionは、コンポーネントの変更検出方法を指定するための。

sample.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush // 変更検出方法を指定
})

changeDetectionには、以下の2種類がある。

値	説明
ChangeDetectionStrategy.Default	デフォルトの動作（すべてのコンポーネントは、デフォルトでこの値が設定されている）
ChangeDetectionStrategy.OnPush	パフォーマンス最適化（@Input() の変更や Observable の通知時のみ検出）

ChangeDetectionStrategy.OnPush を適用することで、不要な再描画を防ぎ、アプリケーションのパフォーマンスを向上させることができるが、@Input()以外の変更（例えばサービスの変更など）は自動的に検出されないため、適切に ChangeDetectorRef を使用して手動で更新をトリガーする必要がある点注意。