web-dev-qa-db-fra.com

Composant Blazor: actualiser le parent lorsque le modèle est mis à jour à partir du composant enfant

J'utilise des composants Blazor côté serveur dans ASP.NET Core 3 preview 4.

J'ai un composant parent et des composants enfants, utilisant le même modèle partagé, comme ceci:

Modèle :

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}

Composant parent:

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}

Composant enfant:

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { get; set; }
}

C'est la même instance du modèle utilisé pour le parent et l'enfant. Lorsque le modèle est mis à jour à partir du parent, les deux affichent la valeur incrémentée correcte. Lorsqu'il est mis à jour à partir de l'enfant, seul l'enfant affiche la valeur correcte.

Comment puis-je forcer le composant parent à être actualisé lorsqu'il est mis à jour à partir de l'enfant?

Remarque, j'ai ici une fonction pour mettre à jour le modèle, mais j'aimerais que la solution fonctionne lorsque les données sont liées à une entrée.

c#asp.net-coreblazorblazor-server-side
2
glacasa

Créez un service partagé. Abonnez-vous à l'événement "RefreshRequested" du service dans le parent et Invoke () de l'enfant. Dans la méthode parente, appelez StateHasChanged ();

public interface IMyService
{
 event Action RefreshRequested;
 void CallRequestRefresh;
 }

public class MyService: IMyService
{
    public event Action RefreshRequested;
    public void CallRequestRefresh()
    {
         RefreshRequested?.Invoke();
    }
}


//child component
MyService.CallRequestRefresh();


//parent component
MyService.RefreshRequested += RefreshMe;

private void RefreshMe()
{
    StateHasChanged();
}
3
Laurence73

@glacasa, le flux des paramètres en cascade est à la baisse. Pour que votre parent soit actualisé, vous souhaitez fournir un rappel que le composant enfant peut appeler, en lui transmettant une valeur. J'ai déjà montré dans la section Blazor ici comment créer un rappel sur le composant parent, et comment déclencher le rappel, en lui passant une valeur ...

J'espère que cela t'aides...

2
enet