在Blazor中如何在其他组件内调用自定义确认弹窗组件？

第一步：修正自定义组件（可选但必要） #

你的组件中包含BlazoredModalInstance级联参数，但当前实现是独立模态框，无需依赖Blazored Modal，建议删除该行代码避免报错：

[CascadingParameter] BlazoredModalInstance ModalInstance { get; set; }

第二步：调用组件的测试页面示例 #

假设你的自定义组件名为CustomConfirmationModal.razor，创建测试组件（如TestConfirmationPage.razor），按以下方式调用：

@page "/test-confirmation"

<h3>测试自定义确认弹窗</h3>

<button class="btn btn-primary" @onclick="ShowConfirmationModal">打开确认弹窗</button>

<!-- 引用自定义弹窗组件，通过@ref获取实例 -->
<CustomConfirmationModal 
    @ref="_confirmationModal"
    ConfirmationTitle="测试确认"
    ConfirmationMessage="你确定要执行这个操作吗？"
    ShowConfirmationbutton="true"
    ConfirmationChanged="HandleConfirmationResult"
    ConfirmationShow="HandleShowAction" />

@code {
    // 声明组件引用，用于调用内部Show方法
    private CustomConfirmationModal _confirmationModal;

    // 触发弹窗显示
    private void ShowConfirmationModal()
    {
        _confirmationModal.Show();
    }

    // 处理APPROVE/CANCEL操作的回调
    private async Task HandleConfirmationResult(bool isApproved)
    {
        if (isApproved)
        {
            Console.WriteLine("用户确认了操作");
            // 这里添加确认后的业务逻辑
        }
        else
        {
            Console.WriteLine("用户取消了操作");
            // 这里添加取消后的业务逻辑
        }
    }

    // 处理SHOW按钮的回调
    private async Task HandleShowAction(bool isShowClicked)
    {
        if (isShowClicked)
        {
            Console.WriteLine("用户点击了SHOW按钮");
            // 这里添加SHOW按钮对应的业务逻辑
        }
    }
}

调用逻辑说明 #

1. 组件引用（@ref）：通过@ref="_confirmationModal"获取弹窗组件实例，从而调用内部的Show()方法触发弹窗显示。
2. 参数自定义：通过ConfirmationTitle、ConfirmationMessage等参数，灵活配置弹窗的标题、提示内容及按钮显示状态。
3. 回调处理：绑定ConfirmationChanged和ConfirmationShow事件，接收弹窗内按钮的点击结果，执行对应的业务逻辑。

内容的提问来源于stack exchange，提问作者gal mor