从嵌入式 Blazor 组件中检索数据答案

【问题标题】：Retrieve data from embedded Blazor component从嵌入式 Blazor 组件中检索数据
【发布时间】：2021-08-07 00:38:14
【问题描述】：

我想创建一个 Blazor 组件，其中向用户弹出一个组件（又名对话框）（弹出的组件将嵌入到主组件中），然后在用户从嵌入对话框组件，父组件会收到通知，并能够从嵌入组件中检索选择数据，就像桌面应用程序中的对话框一样。

我想要的伪代码示例：

<h1>main component</h1>
<EmbedComponent></EmbedComponent>
@code
{
   private void OnSelection(Item selectedItem ){}
}

<h1>embed component</h1>
<h1>please choose:</h1>
<button @onclick="NotifyParent(item1)">option1<button>
<button @onclick="NotifyParent(item2)">option2<button>

我该怎么做（在 Blazor WebAssembly 中）？

【问题讨论】：

这样的？ blazorrepl.com/repl/mFaJlhGv25Ohgvtq32

标签： c# dialog blazor embed blazor-webassembly

【解决方案1】：

您想使用EventCallback。

监听父级中的事件：

<h1>main component</h1>
<EmbededComponent OnSelection="OnSelection" />
@code
{
   private void OnSelection(Item selectedItem ){}
}

接收回调作为参数并从子级触发：

<h1>embeded component</h1>
<h1>please choose:</h1>
<button @onclick="() => NotifyParent(item1)">option1<button>
<button @onclick="() => NotifyParent(item2)">option2<button>

@code {
    [Parameter]
    public EventCallback<Item> OnSelection { get; set; }

    public async Task NotifyParent(Item item) {
        if (OnSelection.HasDelegate) {
            await OnSelection.InvokeAsync(item); 
        }
    }
}

【讨论】：