Question

我有三个组成部分。组件一包含组件二和组件三。第二部分是一个列表。组件三用于向数据库添加项目。

将项目保存到数据库后，我想更新第二部分中的列表。我该怎么办？

Answer 1

场景

我们假设：

<CRUD>
    <GRID/>
    <FORM/>
</CRUD>

选项1：委托

使用委托，您可以捕获GRID组件的引用，并通过委托从GRID调用FORM方法。尝试delegate sample at blazorfiddle。

简化：

在CRUD上：

<GRID @ref="mygrid" />
<FORM mydelegate="@( (s) => mygrid.setData(s) )" />

@code
{
    protected GRID mygrid;
}

在GRID上：

<h1>@data</h1>

@code
{
    string data;

    public void setData(string value)
    {
        data = value;
        StateHasChanged();
    }
}

在FORM上：

<input @bind-value=@somedata />
<button @onclick="@( () => mydelegate(somedata ?? "hi") )">press</button>

@code
{
    [Parameter] public Action<string> mydelegate {set; get;}
    string somedata;
}

选项2：共享列表

只需在组件之间共享您的列表即可。您还可以向GRID订阅add事件列表。有关更多信息，请访问How to handle add to list event?。当然，您也可以使用ObservableCollection。也许您可以避免发生事件，只需添加到列表并调用StateHasChanged就足够了。

请记住，您可以通过参数或cascade parameter共享列表。

<CRUD>
    <GRID data=@mylist />
    <FORM data=@mylist />
</CRUD>

其他选项。

您还有其他选项吗，例如通过依赖注入，事件回调，...使用单例。我建议您阅读3 Ways to Communicate Between Components in Blazor的@Chris Sainty

Answer 2

您应该对问题进行最小限度的回购，以便我们可以清楚地看到您面临的问题。

但是，一般来说，有两种方法可以做到这一点。在“开拓者”部分的答案之一中，我描述了启用这种情况的三种方法。

在这个答案中，我建议您使用应用程序状态模式，从中可以管理组件的状态，执行与组件中的数据相关的CRUD操作，刷新组件等。

由史蒂夫·安德森（Steve Anderson）创建并采用了应用程序状态模式的优秀示例是FlightFinder。此示例（客户端项目）定义了一个名为 AppState 的服务，该服务已注入到许多组件中，并为它们提供了各种功能。请检查该类，所涉及的组件以及它们之间的通信方式，并应用您将在应用程序中学习的内容。不要犹豫，问任何问题。

注意：如果您不熟悉此示例，请彻底学习它，因为这是学习Blazor的绝佳方法。

查看我的答案here和here。

希望这对您有帮助...

Blazor（服务器端）在同级组件之间进行通信

2 个答案:

场景

选项1：委托

选项2：共享列表

其他选项。