web-dev-qa-db-fra.com

Appelez une fonction de composant parent à partir d'un composant enfant dans Angular

J'essaie d'appeler ma fonction close() qui se trouve dans le composant parent à partir du composant enfant dans Angular.

Voici mon code sur Plunker , j'ai essayé d'importer le composant et d'appeler la fonction directement dans mon composant enfant mais j'obtiens cette erreur: Impossible de lire la propriété 'close' de undefined

Comment puis-je réparer cela?

angulartypescript
6
LLaza

Je vais essayer de donner une réponse complète aux deux cas que vous pourriez rencontrer:

Cas 1:Appel d'une fonction enfant à partir du composant parent

Vous pouvez y parvenir simplement en utilisant une variable de modèle sur votre sélecteur enfant pour référencer votre composant enfant dans votre modèle de composant parent, puis vous pouvez appeler n'importe quelle fonction ou propriété publique à l'aide de cette référence.

donc dans votre composant enfant, vous avez une fonction:

test(){
    console.log(`this is a test`);
}

et dans votre composant parent, vous pouvez l'appeler dans votre composant parent, disons après un clic sur le bouton comme ceci:

<child-component #childRef></child-component>
<button (click)="childRef.test()">
    Call the child test function
</button>

Cas 2: Appel d'une fonction parent à partir du composant enfant

C'est un cas qui dépend de votre cas d'utilisation car vous pouvez injecter le composant parent dans le composant enfant et faire la même chose que ci-dessus, mais la relation n'est plus parent-enfant ou enfant-parent, mais les deux composants seront fortement liés ensemble, ce qui est un cas d'utilisation rare. Alternativement, vous pouvez obtenir le même résultat de manière très simple en utilisant le @Output décorateur pour transmettre les données et créer votre fonction chez votre enfant qui consommera les données transmises.

donc dans votre composant enfant, vous procédez comme suit:

@Output() childEvent = new EventEmitter();
test(){
    this.childEvent.emit('this is a test');
}

dans votre modèle parent

<child-component (childEvent)="test($event)"></child-component>

puis dans votre composant

test(msg){
    console.log(msg);
}
29
Hamed Baatour