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

Posted 2023-03-13

【中文标题】从嵌入式 Blazor 组件中检索数据

【英文标题】：Retrieve data from embedded Blazor component

【发布时间】：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

【参考方案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);