1

我正在使用 Blazorise，它提供了多个基本组件，例如<Button>，具有多个参数。我想创建一个简单的组件，该组件将<Button>使用一个或两个硬编码参数（例如Color="Colors.Primary")，然后将其余参数传递到<Button>.

这就是我希望能够写的：

<PrimaryButton Outline>Text</Button>

我想实现这一点，而不必手动设置 in 中可用的所有<Button>参数PrimaryButton.razor。我一直在寻找一种方法来做到这一点，但找不到任何东西。有可能吗？

我已经尝试过继承Button和写入<Button @attributes="@Attributes" Color="Colors.Primary">，但是隐式参数被丢弃了。

4

2 回答 2

2

我认为您仍然必须通过将它们添加到您的自定义组件来将它们作为参数传递。例如，您可以使用Color并Outline设置按钮，但传递Block参数。

/* PrimaryButton.razor */
<Button Color="Color.Primary" Outline="true" Block="@Block">@ChildContent</Button>

@code {
  [Parameter] public bool Block { get; set;}
  [Parameter] public RenderFragment ChildContent { get; set; }
}

然后，您可以将该新组件用作

<PrimaryButton Block="true">Some Text</PrimaryButton>
于 2020-10-19T17:51:27.223 回答
1

您可以为此使用“属性飞溅”

假设您的基本组件已定义

<h1>Base Component</h1>
<div>Param1 = @Param1</div>
<div>Param2 = @Param2</div>
@code
{
    [Parameter] public string Param1 { get; set; }
    [Parameter] public string Param2 { get; set; }
}

并且您想预填充 Param1，因此您创建了一个新的 MyComponent

<BaseComponent Param1="predefined" @attributes=Attributes/>
@code
{
  [Parameter(CaptureUnmatchedValues=true)] 
  public Dictionary<string,object> Attributes { get; set; }       
}

现在，您可以使用 MyComponent 代替 BaseComponent，如果您不为 Param1 提供值，它将是预定义的（在这种情况下，字面意思是该值）

所以这个标记：

<BaseComponent Param1="base" Param2="component"/>

<MyComponent Param1="my" Param2="component"/>

<MyComponent Param2="component"/>

产生这个输出：

基础组件

Param1 = 基础 Param2 = 组件

基础组件

Param1 = 我的 Param2 = 组件

基础组件

Param1 = 预定义 Param2 = 组件

在 BlazorRepl 上查看实时示例：https ://blazorrepl.com/repl/QEvucNFB408fLIXd18

于 2020-10-29T17:41:45.420 回答