ASP.NET Core Blazor 模板化组件ASP.NET Core Blazor templated components

本文内容

作者：Luke Latham 和 Daniel Roth

模板化组件是接受一个或多个 UI 模板作为参数的组件，然后可将其用作组件呈现逻辑的一部分。通过模板化组件，可以创作适用面更广、比常规组件更便于重复使用的组件。下面是一些示例：

• 表组件，用户可通过它指定表的标题、行和页脚的模板。
• 列表组件，用户可通过它指定用于呈现列表中项的模板。

模板参数Template parameters

通过指定一个或多个 RenderFragment 或 RenderFragment<T> 类型的组件参数来定义模板化组件。呈现片段，表示要呈现的 UI 段。RenderFragment<T> 采用可在调用呈现片段时指定的类型参数。

TableTemplate 组件：

@typeparam TItem
<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
    <tfoot>
        <tr>@TableFooter</tr>
    </tfoot>
</table>
@code {
    [Parameter]
    public RenderFragment TableHeader { get; set; }
    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }
    [Parameter]
    public RenderFragment TableFooter { get; set; }
    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

使用模板化组件时，可以使用与参数名称匹配的子元素（在以下示例中为 TableHeader 和 RowTemplate）指定模板参数：

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

模板上下文参数Template context parameters

作为元素传递的 RenderFragment<T> 类型的组件实参具有一个名为 context 的隐式形参（例如前面的代码示例 @context.PetId），但可以使用子元素上的 Context 属性来更改形参名称。在下面的示例中，RowTemplate 元素的 Context 属性指定了 pet 参数：

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

或者，可以在组件元素上指定 Context 属性。指定的 Context 属性适用于所有指定的模板参数。如果你想为隐式子内容指定内容参数名称（不包含任何包装子元素），这可能很有用。在下面的示例中，Context 属性显示在 TableTemplate 元素上，并应用于所有模板参数：

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

泛型类型化组件Generic-typed components

模板化组件通常是泛型类型。例如，泛型 ListViewTemplate 组件可用于呈现 IEnumerable<T> 值。若要定义泛型组件，请使用 @typeparam 指令指定类型参数：

@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; }
}

使用泛型类型化组件时，将在可能的情况下推断类型参数：

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

否则，必须使用与类型参数的名称匹配的属性显式指定类型参数。在下面的示例中，TItem="Pet" 指定类型：

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