Question

现在，我的子组件仅在父组件中的GetLeads()方法完成后才更新。我从没看到微调框或搜索文字。

父项：

<SearchResultComponent  @ref="ChildComponent"></SearchResultComponent>

代码：

 protected SearchResultComponent ChildComponent;
 public int LeadsFound { get; set; }
 public void GetLeads()
 {
      ChildComponent.Refresh(true, 0);
      var leads  = _searchService.Search(searchRequest);
      LeadsFound = leads?.Count ?? 0;
      _writeFileService.WriteToFile(leads);
      ChildComponent.Refresh(false, LeadsFound);
  }

子组件：

@code {

    public bool Searching { get; set; } = false;
    public int LeadsFound { get; set; } = 0;
    public void Refresh(bool searching, int leadsFound)
    {
        Searching = searching;
        LeadsFound = leadsFound;
        StateHasChanged();
    }
}

@if (Searching)
{
    <div>Searching...</div>
    <div>
        <img src="~/Content/searching-spinner.gif" />
    </div>
}
else
{
    <div>Leads Found: @LeadsFound</div>
}

Answer 1

我的子组件仅更新一次

您可以使事件处理程序异步。然后，您可以调用Task.Delay(1)或Task.Yield()，这将实现StateHasChanged（）。

呼叫表格@onclick="@GetLeads"可以保持不变。请注意，您不需要在那里的第二个@。

如果您的searchService.Search()是异步的，那么您就不需要Task.Yield()

 public async Task GetLeads()
 {
      ChildComponent.Refresh(true, 0);      
      await Task.Yield();  // enable the render thread to run.
      var leads  = _searchService.Search(searchRequest);
      LeadsFound = leads?.Count ?? 0;
      _writeFileService.WriteToFile(leads);
      ChildComponent.Refresh(false, LeadsFound);
  }

如何通过同一方法多次从父组件刷新子组件？

1 个答案: