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

问题描述

我有这个代码.

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

@renderFragment是动态呈现组件，而Grid componet是带有添加新"，编辑记录"，删除"等操作的某些数据的列表.

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.

推荐答案

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

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>

Startup.ConfigureServices

services.AddScoped<NotifierService>();

希望这对您有帮助...

Hope this helps...

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