初識 Blazor WebAssembly（樣板元件）

定義：結構在樣板定義好，內容由使用樣板時帶入

• 需要使用 RenderFragment 型別當作參數
• public RenderFragment Template { get; set; }
• public RenderFragment 樣板名稱 { get; set; }在樣板中充當定義參數
• 泛型樣板化元件，需使用 @typeparam 指示詞

例：新建一個樣板文件Child.razor內容如下

<div>
    @ChildTemplate
</div>
//這裡是指使用樣板時，畫面內容會放置在div下

@code {
    [Parameter]
    public RenderFragment? ChildTemplate{ get; set; }
    //ChildTemplate為樣板名稱 *@
}

再使用 一個上層文件Father.razor用於傳輸樣板內容，讓child.razor接受上層內容

<div>
    <Child>
        <ChildTemplate>
            <p>123</p>
        </ChildTemplate>
    </Child>
</div>

如下結果， 

 

 

泛型樣板化組件

组件可以根据不同的类型参数来生成不同的实例

要创建一个泛型樣板化元件，您需要在组件类上使用泛型类型参数，并在组件中使用该参数 

 例：建立一個樣板用於接收上層的數組，再根據這些數組轉化成自己需要的樣板

子組件Child.razor

@typeparam TItem
//1.宣告元件的型別是泛型參數 *@
<div class="container">
    @foreach (var item in ChildItems)
    {   
        <p>@item</p>
    }
</div>

@code {
    [Parameter]
    public IReadOnlyList<TItem> ChildItems { get; set; } = null!;
    //2.在元件的傳入參數使用 TItem 型別
}

在C#中，<T>和<TItem>都是泛型类型参数的表示方式，它们是可以互换使用的。一般来说，<T>是用于通用类型参数的表示方法，而<TItem>则通常用于表示集合（如列表）中的项目类型参数。 

此外，值得注意的是，当在Blazor组件中定义类型参数时，建议使用<TItem>而不是<T>来表示项目类型参数。这是因为在Blazor的某些方面，<T>已被用作其他的目的，例如<TValue>用于表示输入控件的值类型参数，以避免混淆和歧义。 

建立上層文件Father.razor傳遞數組

<div class="box">
    <Child ChildItems="ParentItems">
    </Child >
</div>
@code {
    private List<string> ParentItems = new List<string> { "A", "B", "C" };
}

建立下層文件Child.razor接收數組循環 

• @typeparam TItem ->用於宣告元件的型別是泛型參數。
• IReadOnlyList<TItem> ->唯讀清單中的項目類型。
  這是共變數的型別參數。 也就是說，可以使用自己指定的類型，或衍生程度較高的任何類型。

@typeparam TItem
//1.宣告元件的型別是泛型參數 *@
<div class="container">
    @foreach (var item in ChildItems)
    {   
        <p>@item</p>
    }
</div>

@code {
    [Parameter]
    public IReadOnlyList<TItem> ChildItems { get; set; } =null!;
    //2.在元件的傳入參數使用 TItem 型別
}

將泛型元件的資料內容交給外部使用 (也就是樣板內的資料內容由父來決定)

 例：

新建上層文件 Father.razor

<div class="box">
    <Child Items="pets" Context="apple">
        <Banana>
            <p>@apple.PetId, @apple.Name</p>
        </Banana>
    </Child >
</div>
@code {
   
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "小花" },
        new Pet { PetId = 4, Name = "小貓" },
        new Pet { PetId = 7, Name = "小白" }
    };

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

Child.razor

• IReadOnlyList<TItem> ->唯讀清單中的項目類型。
  這是共變數的型別參數。 也就是說，可以使用自己指定的類型，或衍生程度較高的任何類型。
• RenderFragment<TItem> ->泛型的樣板參數

 

@typeparam Item

<div class="container">
    @foreach (var item in Items)
    {
        @Banana(item)
        //意思是@Banana為泛型區塊，透過RenderFragment樣板參數，將資料內容傳給外部。外部在透過Context="apple"綁定。
    }
</div>

@code {
    [Parameter]
    public RenderFragment<Item> Banana { get; set; } = null!;

    [Parameter]
    public IReadOnlyList<Item> Items { get; set; } = null!;
}