ASP.NET Core Blazor テンプレート コンポーネントASP.NET Core Blazor templated components

作成者: Luke LathamDaniel RothBy Luke Latham and Daniel Roth

テンプレート コンポーネントは、1 つまたは複数の UI テンプレートをパラメーターとして受け取るコンポーネントです。その後、コンポーネントのレンダリング ロジックの一部として使用できます。Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. テンプレート コンポーネントを使用すると、通常のコンポーネントよりも再利用しやすい上位レベルのコンポーネントを作成できます。Templated components allow you to author higher-level components that are more reusable than regular components. いくつかの例を次に示します。A couple of examples include:

  • テーブルのヘッダー、行、フッターのテンプレートをユーザーが指定できるようにするテーブル コンポーネントA table component that allows a user to specify templates for the table's header, rows, and footer.
  • リスト内の項目をレンダリングするためのテンプレートをユーザーが指定できるようにするリスト コンポーネントA list component that allows a user to specify a template for rendering items in a list.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

テンプレート パラメーターTemplate parameters

RenderFragment または RenderFragment<TValue> の型の 1 つまたは複数のコンポーネント パラメーターを指定することで、テンプレート コンポーネントが定義されます。A templated component is defined by specifying one or more component parameters of type RenderFragment or RenderFragment<TValue>. レンダー フラグメントは、レンダリングする UI のセグメントを表します。A render fragment represents a segment of UI to render. RenderFragment<TValue> は、レンダー フラグメントが呼び出されたときに指定できる型パラメーターを受け取ります。RenderFragment<TValue> takes a type parameter that can be specified when the render fragment is invoked.

TableTemplate コンポーネント (TableTemplate.razor):TableTemplate component (TableTemplate.razor):

@typeparam TItem

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

@code {
    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

テンプレート コンポーネントを使用する場合、テンプレート パラメーターは、パラメーターの名前と一致する子要素を使用して指定できます (次の例では TableHeaderRowTemplate)。When using a templated component, the template parameters can be specified using child elements that match the names of the parameters (TableHeader and RowTemplate in the following example):

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

注意

ジェネリック型の制約は、将来のリリースでサポートされる予定です。Generic type constraints will be supported in a future release. 詳細については、ジェネリック型の制約の許可 (dotnet/aspnetcore #8433) を参照してください。For more information, see Allow generic type constraints (dotnet/aspnetcore #8433).

テンプレート コンテキスト パラメーターTemplate context parameters

要素として渡される型 RenderFragment<TValue> のコンポーネント引数には、context という名前の暗黙的なパラメーターがありますが (たとえば、上記のコード サンプルの @context.PetId)、子要素の Context 属性を使用してパラメーター名を変更できます。Component arguments of type RenderFragment<TValue> passed as elements have an implicit parameter named context (for example from the preceding code sample, @context.PetId), but you can change the parameter name using the Context attribute on the child element. 次の例では、RowTemplate 要素の Context 属性で pet パラメーターを指定しています。In the following example, the RowTemplate element's Context attribute specifies the pet parameter:

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    ...
}

または、コンポーネント要素の Context 属性を指定することもできます。Alternatively, you can specify the Context attribute on the component element. 指定された Context 属性は、指定されたすべてのテンプレート パラメーターに適用されます。The specified Context attribute applies to all specified template parameters. これは、(ラップする子要素を持たない) 暗黙的な子コンテンツのコンテンツ パラメーター名を指定する場合に便利です。This can be useful when you want to specify the content parameter name for implicit child content (without any wrapping child element). 次の例では、Context 属性が TableTemplate 要素に表示され、すべてのテンプレート パラメーターに適用されます。In the following example, the Context attribute appears on the TableTemplate element and applies to all template parameters:

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    ...
}

ジェネリック型のコンポーネントGeneric-typed components

多くの場合、テンプレート コンポーネントはジェネリック型です。Templated components are often generically typed. たとえば、ジェエリックの ListViewTemplate コンポーネント (ListViewTemplate.razor) を使用して、IEnumerable<T> 値をレンダリングできます。For example, a generic ListViewTemplate component (ListViewTemplate.razor) can be used to render IEnumerable<T> values. ジェネリック コンポーネントを定義するには、@typeparam ディレクティブを使用して、型パラメーターを指定します。To define a generic component, use the @typeparam directive to specify type parameters:

@typeparam TItem

<ul>
    @foreach (var item in Items)
    {
        @ItemTemplate(item)
    }
</ul>

@code {
    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

ジェネリック型のコンポーネントを使用する場合、可能であれば型パラメーターは推論されます。When using generic-typed components, the type parameter is inferred if possible:

<ListViewTemplate Items="pets">
    <ItemTemplate Context="pet">
        <li>@pet.Name</li>
    </ItemTemplate>
</ListViewTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "Salem Saberhagen" },
        new Pet { Name = "K-9" }
    };

    private class Pet
    {
        public string Name { get; set; }
    }
}

それ以外の場合は、型パラメーターの名前と一致する属性を使用して、型パラメーターを明示的に指定する必要があります。Otherwise, the type parameter must be explicitly specified using an attribute that matches the name of the type parameter. 次の例では、TItem="Pet" によって次の型が指定されます。In the following example, TItem="Pet" specifies the type:

<ListViewTemplate Items="pets" TItem="Pet">
    <ItemTemplate Context="pet">
        <li>@pet.Name</li>
    </ItemTemplate>
</ListViewTemplate>

@code {
    ...
}