将参数传递给 Blazor 组件

Question

我想不出如何实现以下目标：

我需要将一组参数（或数组）传递给我的 Blazor 组件。传递的参数是 Blazor 组件。参数集合必须作为嵌套标记传递。必须能够分别调用每个传入参数-组件的渲染。

也就是说，我想要这样的东西：

<MyComponent>
  <ParameterCollection>
    <MyParameterComponent1>Caption1</MyParameterComponent1>
    <MyParameterComponent2>Caption2</MyParameterComponent2>
    <MyParameterComponent3>Caption3</MyParameterComponent3>
  </ParameterCollection>
</MyComponent>

我的组件代码：

@code{
    [Parameter]
    public RenderFragment[] ParameterCollection {get; set;} //Runtime error
}

我想得到的显然是在这里实现的commercial Blazor component（select VIEW SOURCE 选项卡）。 GridColumns 参数传递给 GridColumn 组件的集合。更准确的说，我认为是它们对应的RenderFragments的集合。问题是怎么做到的？

Answer 1

反过来：DatagGridColumnCollection 组件将自身作为 CascadingValue 插入，而 DatagGridColumn 组件仅调用 Add 方法。

列集合

<CascadingValue Value="this">
  @ChildContent
</CascadingValue>

@code
{ 
    public void Add(DataGridColumn colum) { ... }
}

DataGridColumn

@code {
  [CascadingParameter]
  private ColumnCollection Parent { get; set; }
  protected override void OnInitialized()
  {
    if (Parent != null)  Parent.Add(this);    
  }
}

Answer 2

Blazor 无法获取渲染片段的集合作为参数。这里有两种不同的方法，您可以将动态组件计数作为参数传递

如果您只想传递多个组件，但可以按照传递它们的相同顺序呈现它们：

<MyComponent>
    <ParameterCollection>
        <MyParameterComponent1>Caption1</MyParameterComponent1>
        <MyParameterComponent2>Caption2</MyParameterComponent2>
        <MyParameterComponent3>Caption3</MyParameterComponent3>
    </ParameterCollection>
</MyComponent>

@code{
    [Parameter]
    public RenderFragment ParameterCollection {get; set;} 
}

您可以将它们放置在 .razor 文件中的任何位置 @ParameterCollection。

这是此方法的一个工作示例：https://blazorrepl.com/repl/QaFEadlQ52kWHVkX13

当您希望同时计算动态组件并控制它们的放置位置时。

在这种方法中，您仅使用组件来传递一些元数据——类似于@Henk Holterman 的建议：

<MyComponent>
    <ParameterCollection>
        <MyParameterComponent1>Caption1</MyParameterComponent1>
        <MyParameterComponent2>Caption2</MyParameterComponent2>
        <MyParameterComponent3>Caption3</MyParameterComponent3>
    </ParameterCollection>
</MyComponent>

@code{
    [Parameter]
    public RenderFragment ParameterCollection {get; set;} 
}

通过这种方式，您只需将@ParameterCollection 放在.razor 文件的开头，包裹在Parent 组件的CascadingValue 中。这将触发所有子组件的渲染。

在每个组件的初始化中，您需要触发向父组件填充元数据：

@code {
    [CascadingParameter]
    private MyComponent Parent { get; set; }
    protected override void OnInitialized()
    {
        if (Parent != null)  Parent.AddChild(this);    
    }
}

接收到元数据后，只需再次触发渲染，在

中使用该数据即可

这是一个工作示例：https://blazorrepl.com/repl/wuPOOxvd06vFcWFG21

将参数传递给 Blazor 组件

Passing parameters to a Blazor component

c#

asp.net-core

blazor

blazor-server-side

blazor-client-side

列集合

DataGridColumn