コンポーネントは、Angularアプリケーションの主要な構成要素です。各コンポーネントは、より大きなウェブページの一部を表します。アプリケーションをコンポーネントに整理することで、プロジェクトに構造が与えられ、コードが特定の部分に明確に分割されるため、保守と拡張が容易になります。
コンポーネントの定義
すべてのコンポーネントには、いくつかの主要な部分があります。
- Angularによって使用されるいくつかの設定を含む
@Componentデコレーター。 - DOMにレンダリングされる内容を制御するHTMLテンプレート。
- HTMLでコンポーネントがどのように使用されるかを定義するCSSセレクター。
- ユーザー入力の処理やサーバーへのリクエストの実行など、動作を定義するTypeScriptクラス。
UserProfileコンポーネントの簡略化された例を以下に示します。
// user-profile.ts@Component({ selector: 'user-profile', template: ` <h1>User profile</h1> <p>This is the user profile page</p> `,})export class UserProfile { /* Your component code goes here */ }
@Componentデコレーターは、テンプレートに適用するCSSを指定するために、オプションでstylesプロパティも受け付けます。
// user-profile.ts@Component({ selector: 'user-profile', template: ` <h1>User profile</h1> <p>This is the user profile page</p> `, styles: `h1 { font-size: 3em; } `,})export class UserProfile { /* Your component code goes here */ }
HTMLとCSSを別々のファイルに分離する
templateUrlとstyleUrlを使用して、コンポーネントのHTMLとCSSを別々のファイルで定義できます。
// user-profile.ts@Component({ selector: 'user-profile', templateUrl: 'user-profile.html', styleUrl: 'user-profile.css',})export class UserProfile { // コンポーネントの動作はここに定義されます}
<!-- user-profile.html --><h1>Use profile</h1><p>This is the user profile page</p>
/* user-profile.css */h1 { font-size: 3em;}
コンポーネントの使用
アプリケーションは複数のコンポーネントを組み合わせて構築します。例えば、ユーザーのプロファイルページを作成する場合、次のようにページをいくつかのコンポーネントに分割できます。
ここで、UserProfileコンポーネントは他のいくつかのコンポーネントを使用して最終的なページを作成します。
コンポーネントをインポートして使用するには、次の手順が必要です。
- コンポーネントのTypeScriptファイルに、使用するコンポーネントの
import文を追加します。 @Componentデコレーターのimports配列に、使用するコンポーネントのエントリを追加します。- コンポーネントのテンプレートに、使用するコンポーネントのセレクターと一致する要素を追加します。
ProfilePhotoコンポーネントをインポートするUserProfileコンポーネントの例を次に示します。
// user-profile.tsimport {ProfilePhoto} from 'profile-photo.ts';@Component({ selector: 'user-profile', imports: [ProfilePhoto], template: ` <h1>User profile</h1> <profile-photo /> <p>This is the user profile page</p> `,})export class UserProfile { // コンポーネントの動作はここに定義されます}
Tip: Angularコンポーネントの詳細については、詳細なコンポーネントガイドを参照してください。
次の手順
Angularでのコンポーネントの動作が分かったところで、アプリケーションに動的なデータをどのように追加して管理するかを学ぶ時です。