如何在父零件中从子组件中调用功能

Question

我有父母组件

<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>

在儿童组件中我有方法onsubmit（）{}

当我单击parrent组件中确认按钮时，我有一个疑问何时调用onsubmit（）函数。

我知道我可能应该使用@Input和@output装饰器，但我不知道有多正确。

Answer 1

甚至更容易：给您的孩子一个模板参考，您可以将其函数称为So：（我想您的第二个按钮将拨打电话）

<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

在您的父部件中：

onClick(){
  this.buttonMessage = true;

在您的孩子中：

@Input() buttonMessage: boolean;

和一个ngonchanges：

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