在 Blazor 中的两个子组件之间共享数据的最佳方式 [英] Best way to share data between two child components in Blazor

问题描述

我有这个代码.

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

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

where @renderFragment is dynamically render componet and Grid componet is list of some data with actions like "add new", "edit record", "delete".

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

If we click "add new", form for add new record is opened dynamically in @renderFragment and we want to refresh grid data after submit form but we don't know how to share some data between two child components. Same is about edit form, when some record is edited, we need to refresh grid component to show edited data. If need more code and data about it please comment.

推荐答案

你可以定义一个类服务来实现状态模式和通知模式来处理你的对象的状态，将状态传递给对象，并通知订阅者对象变化.

You may define a class service that implements the State pattern and the Notifier pattern to handle the state of your objects, pass state to objects, and notify subscriber objects of changes.

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

Here's a simplified example of such service, which enables a parent component to communicate with his children.

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);
        if (Notify != null)
        {
            await Notify?.Invoke();
        }

    }

    public event Func<Task> Notify;
 }

Child1.razor

 @inject NotifierService Notifier
 @implements IDisposable

 <h1>User puts in something</h1>
 <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

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

<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 "/"

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

启动.配置服务

services.AddScoped<NotifierService>();

希望这有帮助...

这篇关于在 Blazor 中的两个子组件之间共享数据的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！