Blazor是否有类似于Vue中$attrs的机制？

Question

我发现Vue中的$attrs在组件设计中非常有用。如果我有一个包装“a”标签的组件，我可以使用$attrs将所有这些原生属性传递进来，而不必一个个声明它们作为参数。例如，我有这样一个组件：

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

我需要声明 "Href, OnClick, Classes, Styles" 等参数，但我们知道 "a" 标签有大量其他属性，比如 "target, hreflang..."，更不用说 "input" 标签或其他标签了。我认为将它们全部列举出来作为参数列表是很愚蠢的。

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

- SillyJumper

---

onclick 不是一个属性，它是一个指令，并且应该在 @ 符号之前。从一开始就可以传递参数集合，但现在您可以使用 @attributes 指令将参数集合传递给元素或组件。 - enet

非常感谢。我应该跟进这些新功能。 - SillyJumper

Answer 1

是的，可以。

您可以使用Blazor的新“splat”操作符来实现此操作。例如：

// MyComp

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

@code {
    [Parameter] 
    public string Id { get; set; } 

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

根据上述示例定义一个参数将使其收集在组件上定义但不符合任何现有声明参数的属性。

用法：

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

将呈现：

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

- Chris Sainty

---

那就是我需要的。感谢您提供详细信息。 - SillyJumper

@SillyJumper 如果这个答案解决了你的问题，你介意将其标记为答案，以便其他人知道它有用。 - Chris Sainty

当然，我很抱歉，我甚至还在谷歌上搜索了如何标记答案。我想这就是为什么我是一个愚蠢的跳跃者的原因... - SillyJumper

如果有任何困惑，HTML id 属性（全部小写）也可以直接放在 Razor 组件标签中，而不使用 @code 块中的 Id（大写"I"）成员参数。换句话说，在 Razor 组件文件中，您可以通过先从 html <div> 组件中删除 id="@Id"，然后还要从 @code 块中删除成员参数 Id，最后在使用时，只需像普通的 HTML 属性一样指定 id 属性，就像使用 class 属性一样：<MyComp id="foo" class="myClass" />，这样也会得到相同的结果。 - jbyrd

这就是我一直在寻找的。 - kabuto178

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"。如果Attributes包含type的值，则该值将被type="text"取代。

- Mister Magoo

---

是的，我很欣赏Blazor的开发人员总是能够满足我们的需求。 - SillyJumper