Comment appeler la fonction du composant enfant dans le composant parent

Question

J'ai composants parents

<div md-dialog-content> 
    <div class="section-top"> 
    <p id="title" style="float:left;">Adding Dockument</p> 
    <div md-dialog-actions style="float:right;"> 
     <button class="edm-button inline" md-button (click)="onNoClick()" tabindex="-1">Cancel</button> 
     <button class="edm-button inline" md-button (click)="onClick()" tabindex="-1">Confirm</button> 
    </div> 
    </div> 
    <div> 
    <app-document-data [buttonMessage]="buttonMessage"></app-document-data> 
    </div> 
</div> 

Dans le composant de l'enfant que j'ai méthode onSubmit() {}

J'ai une question quand appeler onSubmit() Fonction quand je clique sur un bouton confirmer dans le composant parrent.

Je sais que je devrais probablement utiliser @Input et @Output décorateur mais je ne sais pas comment correctement.

Answer 1

Il est encore plus facile: donner à votre enfant une référence de modèle, et vous pouvez appeler ses fonctions comme ceci: (je suppose que votre deuxième bouton fera l'appel)

<div md-dialog-content> 
    <div class="section-top"> 
    <p id="title" style="float:left;">Adding Dockument</p> 
    <div md-dialog-actions style="float:right;"> 
     <button class="edm-button inline" md-button (click)="onNoClick()" tabindex="-1">Cancel</button> 
     <button class="edm-button inline" md-button (click)="appDD.onSubmit()" tabindex="-1">Confirm</button> 
    </div> 
    </div> 
    <div> 
    <app-document-data #appDD [buttonMessage]="buttonMessage"></app-document-data> 
    </div> 
</div> 

Answer 2

Dans votre composant parent:

onClick(){ 
    this.buttonMessage = true; 

votre enfant:

@Input() buttonMessage: boolean; 

Et un nGOnChanges:

ngOnChanges(changes: any) { 
    if(changes.buttonMessage.currentValue){ 
    this.onSubmit();