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

API 呼叫後從子元件重新整理 Razor 主頁

本指南解決了在 API 呼叫後從子元件更新主 Razor 頁面的挑戰，特別關注在資料檢索期間維護載入狀態。 此解決方案利用範圍服務和 Blazor 的 InvokeAsync(StateHasChanged) 方法。

問題：初始搜尋顯示載入微調器，但後續過濾器應用程式無法觸發它。

解決方案：此解決方案使用範圍服務來管理應用程式狀態並協調元件之間的更新。

實作步驟：

1. 範圍服務（AppState）： 建立一個範圍服務（例如 AppState）來追蹤是否已收到 API 資料。 該服務將持有一個布林標誌，例如 API_Data_Received.

2. 子元件過濾（FilterRazorComponent）：當在子元件中套用過濾器時：

   • 將 AppState.API_Data_Received 設為 false，表示需要刷新資料。
   • 導覽至 SearchResults.razor 頁面，傳遞任何必要的過濾器參數。 考慮使用導航參數來有效地傳遞資料。

3. 首頁（SearchResults.razor）：

   • 注入AppState服務。
   • 在OnInitializedAsync()中，非同步檢查AppState.API_Data_Received。
   • 如果AppState.API_Data_Received為false，則顯示載入指示器並啟動API呼叫。
   • API 呼叫成功完成後，將 AppState.API_Data_Received 設為 true 並呼叫 InvokeAsync(StateHasChanged) 刷新 UI，刪除載入指示器並顯示更新的結果。

此方法可確保主 SearchResults.razor 頁面一致地反映載入狀態，並在每次由子元件互動觸發的 API 呼叫後更新其內容。 使用範圍服務提供了一種乾淨且有效率的方式來管理應用程式狀態並觸發 UI 更新。

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