Blazor是否有某种机制可以像$ attrs这样工作？

Question

我发现vue中的$ attrs在组件设计中非常有用。如果我有包装“ a”标签的组件，则可以使用$ attrs传递所有这些本机道具，而无需一一声明它们为参数。例如，我有一个像这样的组件：

<div>
    <a href="@Href" onclick="@OnClick" class="@Classes" style="@Styles">@Content</a>
</div>

我必须声明“ Href，OnClick，类，样式”等参数。但是我们知道标签“ a”具有大量其他属性，例如“ target，hreflang ...”，更不用说“ input”标签了。我认为将所有这些都声明为令人难以置信的长参数列表是愚蠢的。

那么，剂量Blazor是否为我们的开发人员提供了类似的功能？

Answer 1

是的，它确实。

您可以使用Blazor的新“ splat”运算符执行此操作。例如：

// MyComp

<div id=“@Id” @attributes=“InputAttributes”></div>

@code {
    [Parameter] string Id { get; set; } 
    [Parameter(CaptureUnmatchedValues = true)]
    private Dictionary<string, object> InputAttributes { get; set; }
}

根据上面的示例定义参数将使其收集组件上定义的与任何现有已声明参数不匹配的属性。

用法：

<MyComp Id=“foo” class=“myclass” />

将呈现：

<div id=“foo” class=“myclass”></div>

Answer 2

是的，来自ASP.NET 博客

#接受任意参数要定义接受任意属性的组件，请使用 [Parameter] 属性定义组件参数，并将 CaptureUnmatchedValues 属性设置为 true。参数的类型必须可从 Dictionary<string, object> 分配。这意味着 IEnumerable<KeyValuePair<string, object>> 或 IReadOnlyDictionary<string, object> 也是选项。

@code {
     [Parameter(CaptureUnmatchedValues= true)]
     public Dictionary<string, object> Attributes { get; set; } 
} 

[Parameter] 上的 CaptureUnmatchedValues 属性允许该参数匹配不匹配任何其他参数的所有属性。一个组件只能用 CaptureUnmatchedValues 定义一个参数。

使用@attributes 渲染任意属性

组件可以使用@attributes 指令属性将任意属性传递给另一个组件或标记元素。@attributes 指令允许您指定要传递给标记元素或组件的属性集合。这很有价值，因为指定为属性的键值对集可以来自 .NET 集合，不需要在组件的源代码中指定。

<input class="form-field" @attributes="Attributes" type="text" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> Attributes { get; set; } 
}

使用@attributes 指令，Attribute 属性的内容会被“涂抹”到输入元素上。如果这导致重复的属性，则从左到右对属性进行评估。在上面的例子中，如果 Attributes 也包含一个 class 的值，它将取代 class="form-field"。如果属性包含类型的值，那么它将被 type="text" 取代。