时间戳

首页 > 解决方案 > 将参数传递给 Blazor 组件

c# - 将参数传递给 Blazor 组件

问题描述

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

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

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

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

我的组件代码：

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

我想得到的显然是在这里实现的商业 Blazor 组件（选择 VIEW SOURCE 选项卡）。向 GridColumns 参数传递 GridColumn 组件的集合。更准确地说，我认为，它是它们对应的 RenderFragments 的集合。问题是它是如何完成的？

标签： c#asp.net-coreblazorblazor-server-sideblazor-client-side

解决方案

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

  1. 如果您只想传递多个组件，但可以按照与传递它们相同的顺序呈现它们：
<MyComponent>
    <ParameterCollection>
        <MyParameterComponent1>Caption1</MyParameterComponent1>
        <MyParameterComponent2>Caption2</MyParameterComponent2>
        <MyParameterComponent3>Caption3</MyParameterComponent3>
    </ParameterCollection>
</MyComponent>

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

您可以将它们渲染到文件中@ParameterCollection的任何位置.razor。

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

  1. 当您想要同时计算两个动态组件并且想要控制它们的放置位置时。

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

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

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

这样，您只需将 @ParameterCollection 放在.razor包裹在父组件的 CascadingValue 中的文件的开头即可。这将触发所有子组件的渲染。

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

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

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

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

推荐阅读