テンプレート コンポーネントについて
複数のアプリ間で再利用できるテンプレート コンポーネントは、UI 要素をカスタマイズするための、試されてテストされたレイアウトとロジックの基盤を提供します。 テンプレート コンポーネントは、共通要素を定義してすべてのページに適用することで、Web アプリ全体に標準化されたデザインを適用します。 テンプレートを使うと、変更を行うのが中央のテンプレートの場所だけになるので、ブランド変更などの更新を効率化できます。
このユニットでは、テンプレート コンポーネントについてと、それを Blazor アプリケーションに組み込む方法を学習します。
RenderFragment 型
テンプレート コンポーネントでは、HTML マークアップの 1 つ以上のフラグメントのレイアウトとロジックを指定します。 HTML のレンダリングは、テンプレート コンポーネントが提供するコンテキストを使って行われます。 テンプレート コンポーネントでは、実行時にマークアップが挿入されるプレースホルダーとして、RenderFragment オブジェクトを使います。
テンプレートは、単なる通常の Razor コンポーネントです。 テンプレートを使うには、使用するコンポーネントで他のコンポーネントと同じようにそれを参照します。 ChildContent という名前は、RenderFragment パラメーターの既定値です。 このパラメーターに別の名前を付けることはできますが、このテンプレートがテスト ページに適用されるときは、この名前を指定する必要があります。
汎用 RenderFragment<T> パラメーター
既定では、RenderFragment クラスは、HTML マークアップのブロックのプレースホルダーとして機能します。 ただし、ジェネリック型 RenderFragment<TValue> を使い、型パラメーターを使用して、テンプレート コンポーネントで指定された型を処理するロジックを提供することで、他の型のコンテンツをレンダリングできます。
たとえば、コレクション内の項目を表示するテンプレートを作成するとします。 C# の foreach ループを使用してコレクションを反復処理し、見つかった項目を表示することもできます。 ただし、このコレクションには任意の型のデータが含まれている可能性があるため、各項目をレンダリングするための汎用的な方法が必要です。
ジェネリック型のテンプレート コンポーネントを記述するには、テンプレート コンポーネント自体の中と、テンプレートの使用コンポーネントの中で、型パラメーターを指定する必要があります。 次の一覧は、ジェネリック型テンプレート コンポーネントの一般的な特徴を表しています。
- テンプレート コンポーネントの型パラメーターは、
@typeparamディレクティブを使って導入されます。 テンプレート コンポーネントには、必要に応じて複数の型パラメーターを含めることができます。 - テンプレートではおそらく、型パラメーターによって指定された型のオブジェクトの列挙可能なコレクションを含むパラメーターが定義されます。
- このテンプレートではまた、同じ型パラメーターを受け取る汎用の
RenderFragment型に基づいたChildContentパラメーターも定義しています。
詳しくは、「ASP.NET Core Blazor のテンプレート化されたコンポーネント」を参照してください。