5

我们的 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解决如下；INotificationServiceConfigureServices

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()
                            });

但是，调用 tNotificationService.AddNotificationAsync并不会触发组件的 theOnChange和 then StateHasChanged，因为组件没有刷新？请问我在这里做错了什么？

4

1 回答 1

6

按照 Microsoft docs 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();
    });
 }

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

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

于 2019-09-24T14:39:15.630 回答