如何在 API 呼叫後從子元件刷新 .RAZOR 主頁？

在 API 呼叫完成後，如何從子元件觸發/刷新主 .RAZOR 頁面

問題概述

當 API 呼叫完成且資料可用時，需要觸發主 .RAZOR 頁面的刷新。挑戰在於找到一個「觸發器」來指示資料已準備好並相應地啟動頁面刷新。

解

1. 實作作用域服務 (AppState)

建立一個作用域服務 (AppState) 來管理傳回的資料集，並使其可存取應用程式中的所有元件。

2. 顯示元件 (SearchResults.razor)

在 SearchResults.razor 中，在頁面載入時從 AppState 服務取得資料並在循環中顯示它。當 API 傳回資料時，使用 if 語句有條件地顯示資料或載入微調器。

3. 整合子篩選組件

當使用者從子元件套用篩選器時，在每個元件中使用以下程式碼：

<code class="language-csharp">string href = "/searchresults" + // 其他参数在此处 ...
NavigationManager.NavigateTo(href);</code>

這將在應用篩選器時始終重定向到 SearchResults.razor。

4. 利用狀態/通知模式

實作狀態/通知模式來廣播 AppState 服務中的變更。這可以透過在子組件中使用以下方法來實現：

<code class="language-csharp">// FilterRazorComponent01.razor 中的示例
//...

public async Task OnSomeEventAsync()
{
    // 模拟一些 API 调用并触发数据更新
    await Task.Delay(3000);
    AppState.NotifyListChanged(AppState.Records, EventArgs.Empty);
    NavigationManager.NavigateTo(NavigationManager.Uri);
}</code>

5. 註冊通知事件

在 SearchResults.razor 中，註冊 AppState 的 ListChanged 事件，並在觸發事件時呼叫 StateHasChanged 以觸發刷新。

<code class="language-csharp">this.AppState.ListChanged += this.OnListChanged;
//...

private void OnListChanged(object sender, EventArgs e)
    => this.InvokeAsync(this.StateHasChanged);</code>

6. 處理子事件上的頁面刷新

當子元件觸發更新 AppState 的事件時，ListChanged 事件將被廣播，SearchResults.razor 透過觸發 StateHasChanged 來刷新頁面以回應。這可確保主頁面根據篩選器元件中的變更更新其顯示。

以上是如何在 API 呼叫後從子元件刷新 .RAZOR 主頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！