Blazor 组件：如何从孙子到孩子到父母或孙子到父母进行通信

Question

在我的 Blazor 服务器应用程序中，我有一个名为“主页”的页面，它基本上是一个搜索页面。在主页（“父页面”）上有一个带有控件的表单，用于过滤存储在后端数据库中的数据。搜索结果的每一行都有一个“编辑”按钮，该按钮显示一个引导对话框，允许用户编辑数据。单击 UpdateDocumentNumber（孙）组件上的“保存”按钮后，我想刷新主页（父）中的搜索结果。

• 父级：带有搜索结果网格的主页（页面）；为每个项目嵌入一个 DisplayDocumentNumber 组件
• 子组件：DisplayDocumentNumber 组件，它有自己的（子）UpdateDocumentNumber 组件
• 孙子：UpdateDocumentNumber 组件 - 引导对话框

我的理解是我可以使用事件回调来做到这一点；然而，虽然我可以引发/调用从孙子到孩子的事件回调，但我似乎无法从孩子那里通知父母。

更多细节...

当主页（“父”页面）迭代返回的项目列表时，它会插入一个<DisplayDocumentNumber>组件（“子”），然后该<DisplayDocumentNumber>组件有一个引用“编辑”对话框的组件。这是迭代搜索结果的主页：

<tbody>
    @foreach (var documentNumber in DocumentNumbers)
        {
            <DisplayDocumentNumber DocumentNumber="documentNumber" /> // DocumentNumber parameter in DisplayDocumentNumber receives the data from the documentNumber local var
        }
</tbody>

这是 DisplayDocumentNumber 组件：

public partial class DisplayDocumentNumber : ComponentBase
{
    [Parameter]
    public DocumentNumberDto DocumentNumber { get; set; }
    [Parameter]
    public EventCallback<bool> OnDocumentNumberUpdatedEventCallback { get; set; }
}

请注意public EventCallback<bool> OnDocumentNumberUpdatedEventCallback { get; set; }. 从孙子到孩子，这都适用。

DisplayDocumentNumber.razor 组件内部是为搜索结果中的每个文档编号呈现的行，其中包括一个“编辑”按钮，该按钮具有用于显示引导对话框的 DOM 事件。最后，如上所述，还有一个<UpdateDocumentNumberDialog>组件 Ie

<tr>
    <td>@DocumentNumber.Column1Name</td>
    <td>@DocumentNumber.Column2Name</td>
    ...etc
    <td><button class="btn btn-primary table-btn" @onclick="@(() => ShowEditDocumentNumberDialog(DocumentNumber))">Edit</button></td>
    <UpdateDocumentNumberDialog @ref="UpdateDocNumDialog" DocumentNumberForUpdating="DocumentNumber" DocumentNumberUpdatedEventCallback="@UpdateDocumentNumberDialog_OnDialogClose"></UpdateDocumentNumberDialog>
</tr>

如果事件回调仅适用于从孙子到孩子或从孩子到父母，我是否必须创建某种状态容器，如 Chris Sainty 所描述的（https://chrissainty.com/3-ways-to-communicate- Between-components） -in-blazor/）？或者，我是否遗漏了有关事件回调的信息？我尝试消除子组件，但失败了，因为“编辑”按钮始终显示网格中迭代的最后一个项目。

Answer 1

我可以想到几个选择。一是让孙子访问主页。这根本不需要事件：

家长剃刀

<CascadingValue Value="this">
    Body of page, somewhere in there including <Grandchild/>
</CascadingValue>

@code{
    async Task DoSomething(){
    }
}

孙子剃须刀

@code {
    [CascadingParameter]
    public Parent MainPage {get; set;} // Or whatever your main page is called

    async Task StartSomething (){
        if (MainPage is not null) MainPage.DoSomething();
    }
}