Blazor - 订阅属性值更改

Question

在 Blazor 中使用组件时，我经常需要子组件对参数更改值做出反应，并相应地做一些事情。

在一个简单的示例中，我在父组件和子组件之间链接了一个 UserId 参数。这个想法是，当父级更改 UserId 值时，子级中的属性设置器会调用一个读取所需数据的方法。这里有一些代码来说明。

我的父母：

<ChildComponent UserId="@UserId" />

<a onclick="@ChangeUser">Load User</a>

@code
{
   public int UserId = 0;
   
   void ChangeUser()
   {
      UserId = 1;
   }
}

子组件：

@if(userDetails != null)
{
   <div>First Name: @userDetails.FirstName</div>
   <div>Surname: @userDetails.Surname</div>
}


@code
{
   private int _userId;
   
   [Parameter] public int UserId
   {
      get => _userId;
      set
      {
         _userId = value;
         LoadUserDetails();
      }
   }
   UserDetails userDetails;
   
   async Task LoadUserDetails()
   {
      userDetails = [read from server here];
      StateHasChanged();
   }
}

虽然这可行，但我不太喜欢 ChildComponent 中的属性设置器是同步的，但它正在调用异步代码 (LoadUserDetails)。

在父级中更新 UserId 并让子级意识到这一点并调用异步方法作为响应而不阻塞任何线程的最干净的方法是什么？

Answer 1

@code
{
   private int _userId;
   private bool _userIdChanged;
   
   [Parameter] public int UserId
   {
      get => _userId;
      set
      {
         _userIdChanged = value != _userId;
         _userId = value;
      }
   }
   UserDetails userDetails;
   
   async Task LoadUserDetails()
   {
      userDetails = [read from server here];
      StateHasChanged();
   }

    protected override async Task OnParametersSetAsync()
    {
         await base.OnParametersSetAsync().ConfigureAwait(false);
         if (_userIdChanged)
         {
             await LoadUserDetails().ConfigureAwait(false);
         }
    }
}