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

Question

J'essaie d'appeler mon close() qui se trouve dans le composant parent depuis le composant enfant dans Angular.

Voici mon code sur Plongeur J'ai essayé d'importer le composant et d'appeler la fonction directement dans mon composant enfant, mais j'obtiens cette erreur : Cannot read property 'close' of undefined (Impossible de lire la propriété 'close' d'une valeur indéfinie)

Comment puis-je résoudre ce problème ?

Answer 1

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

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

Pour ce faire, il vous suffit d'utiliser une variable de modèle sur votre sélecteur d'enfant pour référencer votre composant enfant dans votre modèle de composant parent, puis d'appeler toute fonction ou propriété publique en utilisant 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 un 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

Vous pouvez injecter le composant parent dans le composant enfant et faire la même chose que ci-dessus, mais la relation ne sera plus parent-enfant ou enfant-parent, mais les deux composants seront fortement liés l'un à l'autre, ce qui est un cas d'utilisation rare. Vous pouvez également obtenir le même résultat de manière très simple en utilisant la méthode @Output pour passer des données et créez votre fonction dans votre enfant qui consommera les données passées.

Ainsi, dans votre composant enfant, vous faites ce qui 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>

et ensuite dans votre composant

test(msg){
    console.log(msg);
}