瞭解範本元件

已完成

您可跨多個應用程式重複使用的範本元件,為 UI 元素自訂提供了經過試驗的版面配置和邏輯基礎。 範本元件藉由定義通用元素並將其套用至所有頁面,將標準化設計套用至 Web 應用程式。 範本可以簡化更新,例如品牌重塑,因為您只能在中央範本位置進行修改。

在此單元中,您會瞭解範本元件,以及如何將這些元件併入 Blazor 應用程式。

RenderFragment 型別

範本元件提供一或多個 HTML 標籤片段的配置和邏輯。 HTML 會使用範本元件提供的內容來轉譯。 範本元件會使用 RenderFragment 物件作為預留位置,在執行階段將標記插入其中。

範本只是一般的 Razor 元件。 若要使用範本,取用元件會像任何其他元件一樣參考範本。 ChildContent 名稱是 RenderFragment 參數的預設值。 您可以為參數提供不同的名稱,但必須在測試頁面套用範本時指定此名稱。

泛型 RenderFragment <T> 參數

根據預設,RenderFragment 類別會作為 HTML 標記區塊的預留位置。 不過,您可以使用泛型型別 RenderFragment<TValue> 來轉譯其他型別的內容,方法是使用型別參數,然後提供邏輯來處理範本元件中指定的型別。

例如,假設您想要建立範本來顯示集合中的項目。 您可以使用 C# foreach 迴圈逐一查看集合,並顯示找到的項目。 不過,集合可能包含任何型別的資料,因此您需要能夠轉譯每個項目的泛型方式。

若要撰寫泛型型別範本元件,您必須在範本元件本身和範本的取用元件中指定型別參數。 下列清單代表泛型型別範本元件的常見特性。

  • 範本元件中的型別參數是使用 @typeparam 指示詞引入的。 如有必要,範本元件可以有多個類型參數。
  • 範本多半會定義參數,其中包含型別參數所指定型別物件的可列舉集合。
  • 此範本也會根據採用相同型別參數的泛型 RenderFragment 型別來定義 ChildContent 參數。

如需詳細資訊,請參閱 ASP.NET Core Blazor 樣板化元件

檢定您的知識

1.

您應該在 Blazor 元件上設定哪些參數物件類型,才能共用 HTML 片段?

2.

擷取元件內所有標記,但不需要建立另一個標籤的參數預設名稱為何?