今天要講的也是元件的技巧，當我們想要把內部元件的 UI 交給外部決定時，就可以考慮使用樣板化元件。

樣板化元件是能將 UI 範本作為參數傳遞的元件，並作為元件轉譯邏輯的一部分。樣板化元件可讓我們撰寫比一般元件更容易重複使用的較高層級元件，如：

• 資料表元件 - 可讓其他元件指定資料表標頭、資料列和頁尾的範本。

• 清單元件 - 可讓其他元件指定用於轉譯項目列表的範本。

要製作一個樣板化元件，我們只需要使用 RenderFragment 型別當作參數即可，如：

<div class="container">
    @Template
</div>

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

使用樣板時，畫面內容就會放置在有 container 樣式類別的 div 底下了，而使用方法為：

<Child>
    <Template>
        <p>123</p>
    </Template>
</Child>

使用樣板化元件，並且以 RenderFragment 參數型別的變數名稱當作樣板區塊，在裡面放置 UI 即可。

但如果是要做成資料元件，那麼泛型是不可避免的，否則就很難共用，而要做一個泛型樣板化元件也是很簡單的事情，只需要使用 @typeparam 指示詞即可。

@typeparam 指示詞用於宣告元件的型別是泛型參數。

@typeparam TItem

宣告之後我們就可以在元件的傳入參數使用 TItem 型別，然後使用迴圈來遍歷值並渲染為 p 輸出如：

<div class="container">
  @foreach (var item in Items)
  {
    <p>@item</p>
  }
</div>

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

使用方法為：

<Child Items="items"></Child>

@code {
  private List<string> items = new List<string> { "A", "B", "C" };
}

這邊要注意，當元件類型為泛型時，沒有定義好型別是不能使用的。

這樣基本的樣板化元件就介紹完成了，但如果只有這樣介紹，相信很多人是感受不到樣板化元件的甜美地方，而且如果給的型別是複雜型別，那麼此元件就無法達成目的了。

那能不能將泛型元件的資料內容交給外部使用？當然可以！只需要使用泛型的樣板參數：

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

並且在該參數初始化時提供內容：

<div class="container">
  @foreach (var item in Items)
  {
    @Template(item)
  }
</div>

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

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

然後使用方就能夠透過 @context 來取得遍歷值了，結合起來變成：

<Child Items="pets">
    <Template>
        <p>@context.PetId, @context.Name</p>
    </Template>
</Child>

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

這樣一來外部就能夠自己決定，哪些內容需要被呈現出來，也能夠真正保留重複的地方，是不是很簡單很方便呀！

以上就是樣板化元件的介紹，對於切割元件是不是更能夠掌握了呢？
一樣有上述內容的範例程式在範例程式碼 - day17。

感謝大家的閱讀，我們明天見。

參考資料
ASP.NET Core Blazor 樣板化元件