使用 Blazor 客户端应用程序实现事件订阅答案

【问题标题】：Implementing Event Subscription with Blazor ClientSide Application使用 Blazor 客户端应用程序实现事件订阅
【发布时间】：2020-01-24 14:30:18
【问题描述】：

我们的 Blazor 应用在 preview9 上运行。

我正在尝试实现一个 .razor 组件，该组件侦听来自我们编写的 NotificationService 的事件，以便在调用该服务时刷新视图，但我似乎遗漏了一些东西；

我有我的服务接口（为简洁起见）；

public interface INotificationService
{
    event Action OnChange;
    Task<ServiceResponse<Notification>> AddNotificationAsync(Notification notification);
}

在我的实现中，我调用了OnChange 事件（为简洁起见再次简化）；

public async Task<ServiceResponse<Notification>> AddNotificationAsync(Notification notification)
{
    /*...*/

    StateChanged();
}

StateChanged() 在哪里；

public event Action OnChange;

private void StateChanged() => OnChange?.Invoke();

在我的Blazor.Client 中，我将INotificationService 中的ConfigureServices 解析如下；

services.AddScoped<INotificationService, NotificationService>();

然后我将服务注入到我想订阅OnChange()事件的组件中；

 @inject INotificationService NotificationService

 protected override async Task OnInitializedAsync()
 {
     NotificationService.OnChange += StateHasChanged;
 }

然后在我的另一个razor 页面中，我再次注入相同的服务并调用AddNotificationAsync 方法；

@inject INotificationService NotificationService

  await NotificationService.AddNotificationAsync(
                            new Notification { 
                                Level = NotificationLevel.Success, 
                                Text = $"Agreement Type with Id = {agreementType.Id} has been successfully added.".ToString()
                            });

但是，调用 t NotificationService.AddNotificationAsync 不会触发组件的OnChange 和StateHasChanged，因为组件没有刷新？有什么想法我在这里做错了吗？

【问题讨论】：

我正在尝试实现类似的东西。将依赖项注册为范围是否意味着它是每个请求的，因此另一个页面不会影响它？

标签： c# asp.net-core blazor blazor-client-side

【解决方案1】：

按照微软文档Invoke component methods externally to update state，您应该进行更改：

 @inject INotificationService NotificationService

 protected override async Task OnInitializedAsync()
 {
     NotificationService.OnChange += StateHasChanged;
 }

作者：

 @inject INotificationService NotificationService

 protected override async Task OnInitializedAsync()
 {
     NotificationService.OnChange += OnNotify;
 }


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

在您的代码中，您在 Blazor 的 SynchronizationContext 之外调用组件的 StateHasChanged 方法。

InvokeAsync 用于切换到正确的上下文并对渲染进行排队。

【讨论】：