web-dev-qa-db-fra.com

comment appeler la méthode du composant enfant à partir du composant parent dans blazor?

j'ai deux composants. Le premier composant comprend la liste du modèle et le deuxième composant contient la forme modale Je veux cliquer sur le modèle à l'intérieur du premier composant Dans le deuxième composant, ouvrez modal et modifiez le modèle comment appeler la fonction show dans le composant enfant à partir du composant parent

<ChildComponent />
<button onClick="@ShowModal">show modal</button>

@code{
    ChildComponent child; 

    void ShowModal(){
        child.Show();
    }
}

je suis utilisé @using mais ce code a une erreur:

le type ou le nom de l'espace de noms ChildComponent est introuvable

blazorasp.net-blazor
8
reza malekmohamadi

Voici un article que je viens de publier sur le sujet en utilisant les interfaces:

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

Dans cet exemple, la page Index est un objet IBlazorComponentParent.

Sur le composant de connexion, la partie intéressante est de définir la propriété Parent, vous venez de définir Parent = this:

enter image description here

La façon dont cela fonctionne est que le setter pour la propriété Parent sur le composant Login appelle la méthode Register sur le parent:

[Parameter]
public IBlazorComponentParent Parent
{
    get { return parent; }
    set 
    { 
        // set the parent
        parent = value;

        // if the value for HasParent is true
        if (HasParent)
        {
            // Register with the parent to receive messages from the parent
            Parent.Register(this);
        }
    }
}

Ensuite, sur le composant ou la page parent, la méthode Register stocke la référence au composant:

public void Register(IBlazorComponent component)
{
    // If the component object and Children collection both exist
    if (NullHelper.Exists(component, Children))
    {
        // If this is the Login component
        if (component.Name == "Login")
        {
            // Set the Login control
            this.Login = component as Login;
        }

        // add this child
        Children.Add(component);
    }
}

À ce stade, le parent et la page de connexion peuvent communiquer entre eux car ils contiennent tous deux une méthode ReceiveData dans laquelle vous pouvez envoyer des messages.

1
Data Juggler