原文鏈接：https://blazor-university.com/components/capturing-unexpected-parameters/

捕獲意外參數

源代碼^[1]

之前我們已經看到了如何使用特定名稱聲明參數和級聯參數。例如，一個將 <img> 元素包裝在一些自定義 HTML 中的自定義組件。

<div?class="row"><img?src=@src/> </div>@code? {[Parameter]public?string?src?{?get;?set;?} }

在代碼稽核過程中，有人指出沒有 alt 標簽的圖像對于視力障礙者來說不太容易訪問，因此添加了另一個參數并更新了 HTML。

<div?class="row"?role="img"?aria-label=@alt><img?src=@src/> </div>@code? {[Parameter]public?string?src?{?get;?set;?}[Parameter]public?string?alt?{?get;?set;?} }

隨著時間的推移，需要更多屬性：

• align

• width

• height

此時您可能不再對圖像組件有額外的要求，但是每次編寫組件時都必須為每個可能的屬性編寫參數可能會很煩人，尤其是當您實際上并不處理這些值而只是將它們傳遞給 HTML 元素的標記時。<input> 控件有大約 30 個屬性，需要我們為其編寫參數代碼。

在沒有編碼參數的情況下捕獲值

之前我們看到了如何利用屬性展開^[2]以編程方式生成 HTML 屬性及其值。這涉及將 Dictionary<string, object> 的值分配給一個特別命名的 @attributes 屬性。

在不匹配參數的情況下捕獲屬性值的工作方式類似。我們只需創建一個 Dictionary<string, object> 類型的屬性，將其裝飾為 [Parameter]，但在 Parameter 中我們需要指定 CaptureUnmatchedValues = true。

<div?class="row"?role="img"?aria-label=@alt><img?src=@src?@attributes=AllOtherAttributes?/> </div>@code? {[Parameter]public?string?src?{?get;?set;?}[Parameter]public?string?alt?{?get;?set;?}[Parameter(CaptureUnmatchedValues?=?true)]public?Dictionary<string,?object>?AllOtherAttributes?{?get;?set;?} }

現在，當您的組件的使用者使用 [Parameter] 修飾屬性（正常行為）添加您未明確允許的屬性值時，Blazor 不會拋出異常，而是將它們作為鍵/值對收集到我們的字典中。

在前面的示例中，我們組件的使用者指定的任何 attributes=value 分配都將添加到我們組件內的 <img> 元素中。

<MyCustomImage?src="https://randomuser.me/api/portraits/lego/6.jpg"?alt="A?photo?of?Emmet"?width=64?height=64?/>

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/CapturingUnexpectedParameters

總結

以上是生活随笔為你收集整理的Blazor University （10）组件 — 捕获意外参数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。