概要
Angularの@Componentの設定関連をメモ。
動作環境
- Angular 6.0.x
- TypeScript 2.7.x
@Componentの設定
| 項目 | 設定値・設定例 | 概要 |
|---|---|---|
| moduleId | module.id |
SystemJS使用時に設定。templateUrl、styleUrlsを相対パスで設定できるようになります。Webpack, AngularCLI使用時は設定不要。 |
| templateUrl | './app.component.ts' |
テンプレートになるHTMLのファイルパスを指定します。 |
| template | '<div></div>' |
テンプレートになるHTMLを記載します。templateUrlと同時に指定はしないでください。 |
| styleUrls | [ './app.component.css' ] |
コンポーネントで適用するCSSのファイルパスを指定します。(複数指定可能) |
| styles | ['h1 { font-weight: normal; }'] |
コンポーネントで適用するスタイルを記載します。 |
| changeDetection | ChangeDetectionStrategy.OnPush |
ChangeDetectionのチューニング関連。OnPushに設定すると@Inputプロパティ変更時のみ実行されるようです。 |
| encapsulation | ViewEncapsulation.None |
スタイルのカプセル化関連を制御します。 |
| exportAs | 'ngForm' |
テンプレート上で#<変数名>="<exportAs>"のような形で設定するための値です。 |
個人メモ
- moduleId は基本的には使用しない。SystemJSを利用した開発環境の場合は使用。
- templateUrl と template はプロジェクトのルール等で調整。個人的には簡単なコンポーネントはtemplete。ページコンポーネントはtemplateUrlを利用。
