Comment actualiser une page principale du rasoir Blazor à partir des composants enfants après un appel API ?

Déclenchez/actualisez la page principale .Razor une fois l'appel API du sous-composant Blazor terminé

Dans Blazor, nous rencontrons souvent des situations où nous devons mettre à jour dynamiquement la mise en page principale ou actualiser le contenu en fonction d'événements ou d'actions déclenchées dans des composants enfants imbriqués (tels que l'achèvement d'un appel API).

Cas réel

Considérez le scénario suivant :

• Nous avons une page de recherche principale avec plusieurs composants de filtre (par exemple SearchResults.razor).
• Lorsque l'utilisateur applique un filtre, nous appelons le point de terminaison de l'API pour obtenir les données modifiées.
• Nous souhaitons afficher les données mises à jour et masquer la flèche de chargement sur la page SearchResults.razor une fois l'appel API terminé.

Solution

Pour réaliser les solutions ci-dessus, nous utilisons les technologies suivantes :

1. Implémenter des services avec état

Nous utilisons des services étendus (tels que AppState) pour stocker et partager les données API récupérées afin qu'elles soient accessibles à la fois par la page racine et ses sous-composants.

2. Créez le composant "chargement"

Nous définissons un composant Loading.razor réutilisable qui affiche le spinner lorsque la page se charge et le contenu lorsque les données sont prêtes.

3. Utiliser le service de visualisation

Nous créons un service de visualisation (par exemple WeatherForecastViewService) qui gère les données et expose un événement ListChanged qui est déclenché lorsque les données sous-jacentes changent.

4. Liez le sous-composant au service de vue

Dans le composant enfant, nous injectons le service de visualisation et surveillons son événement ListChanged. Une fois qu'un changement est détecté, nous utilisons StateHasChanged pour actualiser le composant et afficher les données mises à jour.

5. Gérer le statut de manière centralisée sur la page racine

Dans la page principale SearchResults.razor, nous :

• Liez le composant Loading à AppState pour afficher ou masquer le spinner en fonction de la disponibilité des données.
• Injectez le service de visualisation à l'aide de l'injection de dépendances.
• Obtenez des données et mettez à jour AppState de manière asynchrone.
• Écoutez l'événement ListChanged du service d'affichage et appelez StateHasChanged pour déclencher les mises à jour de l'interface utilisateur.

Extrait de code (SearchResults.razor)

<code class="language-csharp">@code {
    [Inject] WeatherForecastViewService viewService { get; set; }

    // API 调用完成后赋值为 true
    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GetForecastsAsync();
        this.viewService.ListChanged += this.OnListChanged;
    }

    private async Task GetForecastsAsync()
    {
        // 代码省略，为简洁起见
    }

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

    public void Dispose()
    {
        this.viewService.ListChanged -= this.OnListChanged;
    }
}</code>

Extrait de code (Loading.razor)

<code class="language-csharp">@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    // 显示加载微调器
}</code>

En implémentant ces techniques, nous établissons un canal de communication entre les composants enfants et la page principale, nous permettant de déclencher des mises à jour de l'interface utilisateur et de maintenir un état de données cohérent dans les relations parent-enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!