如何在两个兄弟Blazor组件之间进行通信? [英] How do I communicate between two sibling Blazor components?

问题描述

我有一个Blazor页面，其中包含两个组件.一个组件具有一个按钮，单击该按钮可生成一个随机数.另一个组件的文本区域应显示生成的随机数.

I have a Blazor page with two components. One component has a button which generates a random number when clicked. The other component has a text area which should display the generated random number.

<h1>Parent Page</h1>

<ProvideNumberComponent />

<DisplayNumberComponent  />

@code {
}

<h3>Provides Number</h3>

<button class="btn btn-primary" @onclick="CalculateNumber">Provide Number</button>

@code {
    private void CalculateNumber(MouseEventArgs e)
    {
        Random rnd = new Random();
        Int32 nextNumber = rnd.Next();
    }

}

<h3>Displays number</h3>

<textarea cols="9" rows="1" readonly style="font-family:monospace;" />

@code {

}

从计算同级组件中获得显示在显示同级组件中的数字的最干净方法是什么?

What is the cleanest way to get the number from the calculate sibling component to appear in the display sibling component?

我的代码的一个问题是，随机对象在每次单击按钮时都会实例化，而不是在初始化时一次.通过将Random对象放置在单例服务类中并将其注入到calculate组件中，是否可以最好地解决此问题?

A problem with my code is that the Random object is instantiated on every button click, instead of once on initialization. Is this best addressed by placing the Random object in a singleton service class, and injecting that into the calculate component?

推荐答案

最好的解决方案是创建一个实现状态模式和通知程序模式的服务.以下代码描述了如何通过中介进行两个同级之间的通信

The best solution, to my mind, is to create a service which implements the state pattern and the notifier pattern. The following code describes how communication between two sibling can be done through an intermediary

public class NotifierService
{
    public NotifierService()
    {

    }

    int rnd;
    public int RandomNumber
    {
        get => rnd;
        set
        {
            if (rnd != value)
            {
                rnd= value;

                if (Notify != null)
                {
                    Notify?.Invoke();
                }
            }
        }
     }
     public event Func<Task> Notify;
 }

添加此内容:services.AddScoped<NotifierService>();

 @inject NotifierService Notifier
 @implements IDisposable

<h3>Provides Number</h3>

 <button class="btn btn-primary" @onclick="CalculateNumber">Provide 
                                                    Number</button>

 @code 
 {
    private void CalculateNumber(MouseEventArgs e)
   {
      Random rnd = new Random();
      Int32 nextNumber = rnd.Next();

      Notifier.RandomNumber = nextNumber; 
   }

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


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


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

}

DisplayNumberComponent.cs

 @inject NotifierService Notifier
 @implements IDisposable

 <hr />
<h3>Displays number</h3>

<textarea cols="9" rows="1" readonly style="font-family:monospace;">
    @Notifier.RandomNumber
</textarea>

@code {

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


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


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

 }

当然，您可以在多个组件中注入和使用该服务，以及添加该服务可以提供的更多功能. 除非事件发生在父代和子代之间，否则通过事件处理程序实现通信可能会遇到问题.

Of course you can inject and use the service in multiple components, as well as adding more features that the service can provide. Implementing communication by means of event handlers may be problematic, unless it is between a parent and its child...

希望这行得通...

这篇关于如何在两个兄弟Blazor组件之间进行通信?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！