コンポーネントの組み立て

コンポーネントテンプレート、コンポーネントロジック、コンポーネントスタイルの更新方法を学びましたが、アプリケーションでコンポーネントをどのように使用するかについてはどうでしょうか？

コンポーネント設定の selector プロパティを使用すると、別のテンプレートでコンポーネントを参照する際に使用する名前が得られます。selector はHTMLタグのように使用します。たとえば、app-user はテンプレートでは <app-user /> になります。

このアクティビティでは、コンポーネントの構成方法を学びます。

この例では、User と App の2つのコンポーネントがあります。

1. Userへの参照を追加

   App テンプレートを更新して、app-userセレクターを使用する User への参照を含めます。App のインポート配列に User を追加してください。これにより、App テンプレートで使用できるようになります。

         
   template: `<app-user />`,imports: [User]
       

   コンポーネントは、Username: youngTech というメッセージを表示するようになりました。テンプレートコードを更新して、さらにマークアップを含めることができます。

2. さらにマークアップを追加

   テンプレートでは任意のHTMLマークアップを使用できるため、Appのテンプレートを更新して、さらにHTML要素を含めてみてください。この例では、<app-user> 要素の親として <section> 要素を追加します。

         
   template: `<section><app-user /></section>`,
       

必要なだけ多くのHTMLマークアップとコンポーネントを使用して、アプリのアイデアを実現できます。同じページにコンポーネントの複数のコピーを含めることもできます。

これは素晴らしい導入ですね。データに基づいてコンポーネントを条件付きで表示するにはどうすればよいでしょうか？詳細については、次のセクションをご覧ください。