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

Question

我想创建一个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中(？

Answer 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); 
}
}
}