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 中国語 Web サイトの他の関連記事を参照してください。