Tip: このガイドでは、すでに基本概念のガイドを読んでいることを前提としています。Angularを初めて使う場合は、まずそちらをお読みください。
すべてのコンポーネントには次のものが必要です。
- ユーザー入力の処理やサーバーからのデータ取得などの動作を定義するTypeScriptクラス
- DOMにレンダリングされる内容を制御するHTMLテンプレート
- HTMLでコンポーネントがどのように使用されるかを定義するCSSセレクター
TypeScriptクラスの上部に @Component デコレーター を追加することで、コンポーネントにAngular固有の情報を与えます。
@Component({ selector: 'profile-photo', template: `<img src="profile-photo.jpg" alt="Your profile photo">`,})export class ProfilePhoto { }
Angularテンプレートの書き方については、テンプレートガイドを参照してください。
@Component デコレーターに渡されるオブジェクトは、コンポーネントのメタデータと呼ばれます。これには、このガイドで説明されている selector、template、その他のプロパティが含まれています。
コンポーネントには、オプションでそのコンポーネントのDOMに適用されるCSSスタイルのリストを含めることができます。
@Component({ selector: 'profile-photo', template: `<img src="profile-photo.jpg" alt="Your profile photo">`, styles: `img { border-radius: 50%; }`,})export class ProfilePhoto { }
デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、コンポーネントのスタイリングを参照してください。
代わりに、テンプレートとスタイルを別々のファイルに書くこともできます。
@Component({ selector: 'profile-photo', templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css',})export class ProfilePhoto { }
これにより、プロジェクト内のプレゼンテーションと動作の懸念を分離できます。プロジェクト全体で一貫したアプローチを選択することも、コンポーネントごとに使用するものを決定できます。
templateUrl と styleUrl はどちらも、コンポーネントが存在するディレクトリを基準とした相対パスです。
コンポーネントの使用
すべてのコンポーネントはCSSセレクターを定義します。
@Component({ selector: 'profile-photo', ...})export class ProfilePhoto { }
Angularがサポートするセレクターの種類と、セレクターを選択する際のガイダンスについては、コンポーネントセレクターを参照してください。
他のコンポーネントのテンプレートに一致するHTML要素を作成することで、コンポーネントを使用します。
@Component({ selector: 'user-profile', template: ` <profile-photo /> <button>Upload a new profile photo</button>`, ...,})export class UserProfile { }
テンプレートで他のコンポーネントを参照して使用する方法は、コンポーネントのインポートと使用を参照してください。
Angularは、遭遇した一致するHTML要素ごとに、コンポーネントのインスタンスを作成します。コンポーネントのセレクターに一致するDOM要素は、そのコンポーネントのホスト要素と呼ばれます。コンポーネントのテンプレートの内容は、そのホスト要素内にレンダリングされます。
コンポーネントによってレンダリングされたDOM (コンポーネントのテンプレートに対応)は、 そのコンポーネントのビューと呼ばれます。
このようにコンポーネントを組み合わせることで、Angular アプリケーションはコンポーネントのツリーとして考えることができます。