BootstrapBlazor组件库,组件方法的表达式传参

发布时间 2023-08-11 09:00:32作者: 代码搬运工old-li

BootstrapBlazor组件库,组件方法的表达式传参

有时候我们在循环中创建组件的时候,可能想把item的值也一并传入组件的方法事件中去处理,有很多小伙伴就不知道如何去调用事件了。

下面是一段实例代码,通过循环遍历来创建图片,并且创建一个删除图片的按钮,这个按钮的OnConfirm方法需要把图片本身也给带进去。
这个时候就可以使用表达式来传参OnConfirm="@(async()=>await DeleteImages(img))"

@foreach (var img in images)
{
    <div class="col-auto">
        <Card IsShadow="true">
            <HeaderTemplate>
                <div class="container">
                    <div class="row">
                        <div class="col-auto">
                            <PopConfirmButton Placement="Placement.Top"
                                              Color="Color.Danger" Size="Size.ExtraSmall"
                                              ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                                              ConfirmButtonColor="Color.Danger"
                                              Text="删除照片"
                                              Content="是否确认删除?"
                                              IsAsync="true"
                                              OnBeforeClick="OnBeforeDeleteImages"
                                              OnConfirm="@(async()=>await DeleteImages(img))" />
                        </div>
                        <div class="col-auto">
                            <code>@img.FileNum</code>
                        </div>
                    </div>
                </div>
            </HeaderTemplate>
            <BodyTemplate>
                <ImageViewer style="width:150px;"
                             Alt="@img.Test"
                             Url="@img.Url"
                             PreviewList="@(new List<string>() { img.Url! })"
                             ShowPlaceHolder="true" />
            </BodyTemplate>
        </Card>
    </div>
}
private async Task DeleteImages(Images image)
{
    await ...
}

这样我们就实现了这么一个需求,那如果我需要在传参的同时把组件本身的参数也给传过去,可以用下面的语法

OnConfirm="@(async(x)=>await DeleteImages(x,img))"

private async Task DeleteImages(object sender,Images image)
{
    await ...
}

表达式括号里面的x,就是组件本身的参数了,这样就实现了组件传参的一个灵活性。