CascadingTypeParameter

根據上階元件推斷泛型型別(Infer generic types based on ancestor components),CascadingTypeParameterAttribute

[CascadingTypeParameter] 屬性

為.NET6增加的指令。效果像 CascadingParameter屬性一樣，元件可以向子孫層元件傳遞 @typeparam參數。

範例碼

袓父層元件範例

Shared/Chart.razor

@attribute [CascadingTypeParameter(nameof(TLineData))]
@typeparam TLineData

...

@code {
    [Parameter]
    public IEnumerable<TLineData> Data { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}c

子孫層元件範例

Shared/Line.razor:

@typeparam TLineData

...

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public decimal Value { get; set; }
}r

Chart使用元件時，不會 TLineData 針對圖表的每個 Line 元件指定。

Pages/StockPriceHistory.razor

@page "/stock-price-history"

<Chart Data="stockPriceHistory.GroupBy(x => x.Date)">
    <Line Title="Open" Value="day => day.Values.First()" />
    <Line Title="High" Value="day => day.Values.Max()" />
    <Line Title="Low" Value="day => day.Values.Min()" />
    <Line Title="Close" Value="day => day.Values.Last()" />
</Chart>

範例碼二

繼承現有元件，增加[CascadingTypeParameter(nameof(TTableFields))]屬性以向子孫層傳遞 @typeparam TTableFields。

MudTableEx.cs

using Microsoft.AspNetCore.Components;
using MudBlazor;

namespace YourProject.Shared;

/// <summary>
/// 繼承 MudTable，以讓子孫層元件可以成功自動推斷泛型型別 @typeparam TTableProps。
/// </summary>
/// <see cref="[根據上階元件推斷泛型型別](https://docs.microsoft.com/zh-tw/aspnet/core/blazor/components/templated-components?view=aspnetcore-6.0#infer-generic-types-based-on-ancestor-components)"/>
[CascadingTypeParameter(nameof(TTableFields))]
public class MudTableEx<TTableFields> : MudTable<TTableFields>
{ }

自訂子孫層元件，將會接收（型別推論）@typeparam TTableFields。

MudThEx.razor

@inherits MudComponentBase
@typeparam TTableFields
@* 註：TTableFields 將自 MudTabelEx 自動取得 *@

@* 此元件可取代『MudTh』，是複合 MudTh + MudTableSortLabel 以簡化語法 *@
<MudTh Class=@base.Class Style=@base.Style Tag=@base.Tag UserAttributes=@base.UserAttributes>
    <MudTableSortLabel SortBy=@SortBy>
        @ChildContent
    </MudTableSortLabel>
</MudTh>

@code{
    [CascadingParameter]
    public TableContext TableContext { get; set; }
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public Func<TTableFields, object> SortBy { get; set; }
}

參考文章

ASP.NET Core Blazor 樣板化元件MicrosoftLearn

根據上階元件推斷泛型型別