2+ appeler une fonction dans un composant enfant de son composant parent
j'aimerais savoir la meilleure façon de le faire, et si il y a différentes façons. J'essaie d'appeler une fonction dans un composant enfant de son composant parent. Donc, si j'ai:
<parent>
<child></child>
</parent>
...et child a des fonctions appelées show() ou hide(), comment puis-je appeler un de ces <!--4?
2 réponses
à l'Intérieur de votre template:
<parent (click)="yourChild.hide()">
<child #yourChild></child>
</parent>
à l'Intérieur de votre composant (option1):
import { ..., ViewChild, ... } from '@angular/core';
// ...
export class ParentComponent {
@ViewChild('yourChild') child;
ngAfterViewInit() {
console.log('only after THIS EVENT "child" is usable!!');
this.child.hide();
}
}
à l'Intérieur de votre composant (option2):
import { ..., ViewChild, ... } from '@angular/core';
import { ..., ChildComponent, ... } from '....';
// ...
export class ParentComponent {
@ViewChild(ChildComponent) child;
ngAfterViewInit() {
console.log('only after THIS EVENT "child" is usable!!');
this.child.hide();
}
}
voir les documents officiels: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child
démo en live plunker: https://plnkr.co/edit/fEYwlKlkMbPdfx9IGXGR?p=preview
pour appeler une fonction d'un enfant, vous aurez besoin de @ViewChild. Cependant, pour afficher / cacher un composant, il est préférable de le résoudre dans le modèle:
<parent>
<button (click)="showChild=!showChild">Toggle child</button>
<child *ngIf="showChild"></child>
</parent>
Pas besoin de déclarer une fonction personnalisée hide().