Component
@Componentはコンポーネントを作成する為のデコレーターです。
利用する場合は@angular/coreよりimportして読み込みます。
import { Component } from '@angular/core';@Componentとして作成するコンポーネントclassがどのような機能があるかなどのメタデータの設定を行います。
@Component({
selector: 'greet',
template: 'Hello {{name}}!'
})
class Greet {
name: string = 'World';
}@Componentに設定できるメタデータは以下のとおりです。
| animations | triggerで定義されたコンポーネントで利用するアニメーションの配列 |
|---|---|
| changeDetection | ChangeDetectionStrategyによりChange Detectionの設定ができる |
| encapsulation | ViewEncapsulationでCSSのカプセル化をどのように行うか設定ができます。 |
| entryComponents | 動的に読み込むコンポーネントを配列で指定 |
| exportAs | コンポーネントのインスタンスにアクセスするための名前を設定することができる。(ref) |
| host | ルート要素に対するイベントや属性を指定する事ができる (ref) |
| inputs | @Inputの変わりにモジュールに引き継ぐデータを配列で指定できる (ref) |
| interpolation | テンプレート変数の囲い文字を変更することができる( ref ) |
| moduleId | ES/CommonJSで利用される、コンポーネントを指し示すID |
| outputs | @Outputの変わりに発行するイベントを配列で指定できる( ref ) |
| providers | コンポーネントと子コンポーネントで利用できるプロバイダーの一覧が指定できる |
| queries | ContentChildrenやViewChildrenなどのQueryListにアクセスするためのプロパティです ( ref ) |
| selector | コンポーネントを指し示すCSSセレクター |
| styleUrls | コンポーネントで利用されるスタイルシートのURLの配列 |
| styles | コンポーネントで利用されるインラインCSSの配列 |
| template | コンポーネントのHTML |
| templateUrl | コンポーネントのHTMLファイルのURL |
| viewProviders | list of providers available to this component and its view children |
参考URL
参考URL: Component decorator - Angular
登録日 : 2017年01月27日 最終更新日 : 2017年2月2日