时间戳

首页 > 解决方案 > 在 Blazor 中的两个子组件之间共享数据的最佳方式

c# - 在 Blazor 中的两个子组件之间共享数据的最佳方式

问题描述

我有这个代码。

<ParentComponent>
    <ChildComponet>
         @renderFragment
    </ChildComponent>
    <ChildComponetn>
       <GridComponent Data="@dataList"/>
    </ChildComponent>
</ParentComponent>

其中@renderFragment 是动态渲染组件，而网格组件是一些数据的列表，其中包含“添加新”、“编辑记录”、“删除”等操作。

如果我们点击“添加新”，添加新记录的表单会在@renderFragment 中动态打开，我们想在提交表单后刷新网格数据，但我们不知道如何在两个子组件之间共享一些数据。编辑表单也是如此，当编辑某些记录时，我们需要刷新网格组件以显示编辑的数据。如果需要更多关于它的代码和数据，请发表评论。

标签： c#.net-coreblazorblazor-client-sideasp.net-blazor

解决方案

您可以定义一个实现状态模式和通知器模式的类服务来处理对象的状态，将状态传递给对象，并通知订阅者对象的更改。

这是此类服务的简化示例，它使父组件能够与其子组件进行通信。

通知服务.cs

public class NotifierService
{
    private readonly List<string> values = new List<string>();
    public IReadOnlyList<string> ValuesList => values;

    public NotifierService()
    {

    }

    public async Task AddTolist(string value)
    {
        values.Add(value);

        await Notify?.Invoke();
        
    }

    public event Func<Task> Notify;
}

Child1.razor

    @inject NotifierService Notifier
@implements IDisposable

<div>User puts in something</div>
<input type="text" @bind="@value" />
<button @onclick="@AddValue">Add value</button>

@foreach (var value in Notifier.ValuesList)
{
    <p>@value</p>
}


@code {
    private string value { get; set; }

    public async Task AddValue()
    {
        await Notifier.AddTolist(value);
    }

    public async Task OnNotify()
    {
        await InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }


    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }


    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

Child2.razor

    @inject NotifierService Notifier

<div>Displays Value from service and lets user put in new value</div>

<input type="text" @bind="@value" />

<button @onclick="@AddValue">Set Value</button>

@code {
    private string value { get; set; }
    public async Task AddValue()
    {
        await Notifier.AddTolist(value);
         
    }

}

用法

@page "/"

 <p>
    <Child1></Child1>
 </p>
<p></p>
<p>
   <Child2></Child2>
</p>

启动.ConfigureServices

services.AddScoped<NotifierService>();

希望这可以帮助...

推荐阅读