コンポーネントは Angular UI の基本的な構成要素です。@Component で装飾された TypeScript クラスで、画面の一部分(その「ビュー」)を制御します。すべての Angular アプリはコンポーネントのツリーです。
コンポーネントの構成
ts
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
@Component デコレータは 3 つのものをまとめます。セレクタ(HTML で使用する方法)、テンプレート(マークアップ)、およびスタイル(このコンポーネントにスコープされます)。
<!-- user-card.html — the template binds to the class -->
<h2>{{ name }}</h2> <!-- interpolate a property -->
<button (click)="greet()">Greet</button> <!-- call a method on click -->
クラスのパブリック プロパティとメソッドは、バインディングを通じてテンプレート内で直接アクセス可能です — これは Angular がデータとビューを接続する方法の核です。
<!-- in another component's template, use the selector -->
<app-user-card></app-user-card>
/* user-card.css — these styles ONLY affect this component */
h2 { color: blue; } /* won't leak to other components' <h2>s */
Angular はコンポーネント スタイルを自動的にスコープします(View Encapsulation)。そのため CSS はコンポーネント間でリークしません。
コンポーネントは、すべての Angular アプリを構造化する方法です。テンプレート + ロジック + スコープされたスタイルの自己完結型の単位をツリーに構成します。
@Component デコレータ(セレクタ、テンプレート、スタイル)と、クラスのプロパティ/メソッドがテンプレートにバインドされる仕組みを理解することは、Angular 開発の絶対的な基盤です。他のすべてはコンポーネント モデルの上に構築されます。