瞭解範本元件
已完成
- 4 分鐘
您可跨多個應用程式重複使用的範本元件,為 UI 元素自訂提供了經過試驗的版面配置和邏輯基礎。 範本元件藉由定義通用元素並將其套用至所有頁面,將標準化設計套用至 Web 應用程式。 範本可以簡化更新,例如品牌重塑,因為您只能在中央範本位置進行修改。
在此單元中,您會瞭解範本元件,以及如何將這些元件併入 Blazor 應用程式。
RenderFragment 型別
範本元件提供一或多個 HTML 標籤片段的配置和邏輯。 HTML 會使用範本元件提供的內容來轉譯。 範本元件會使用 RenderFragment 物件作為預留位置,在執行階段將標記插入其中。
範本只是一般的 Razor 元件。 若要使用範本,取用元件會像任何其他元件一樣參考範本。
ChildContent 名稱是 RenderFragment 參數的預設值。 您可以為參數提供不同的名稱,但必須在測試頁面套用範本時指定此名稱。
泛型 RenderFragment <T> 參數
根據預設,RenderFragment 類別會作為 HTML 標記區塊的預留位置。 不過,您可以使用泛型型別 RenderFragment<TValue> 來轉譯其他型別的內容,方法是使用型別參數,然後提供邏輯來處理範本元件中指定的型別。
例如,假設您想要建立範本來顯示集合中的項目。 您可以使用 C# foreach 迴圈逐一查看集合,並顯示找到的項目。 不過,集合可能包含任何型別的資料,因此您需要能夠轉譯每個項目的泛型方式。
若要撰寫泛型型別範本元件,您必須在範本元件本身和範本的取用元件中指定型別參數。 下列清單代表泛型型別範本元件的常見特性。
- 範本元件中的型別參數是使用
@typeparam指示詞引入的。 如有必要,範本元件可以有多個類型參數。 - 範本多半會定義參數,其中包含型別參數所指定型別物件的可列舉集合。
- 此範本也會根據採用相同型別參數的泛型
ChildContent型別來定義RenderFragment參數。
如需詳細資訊,請參閱 ASP.NET Core Blazor 樣板化元件。