如何在父组件中调用子组件的函数

How to call function from child component in parent component

我有父组件

<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() { }

我有一个问题,当我在父组件中单击确认按钮时,何时调用 onSubmit() 函数。

我知道我可能应该使用@Input 和@Output 装饰器,但我不知道如何正确。

还有更简单的方法:给您的 child 一个模板参考,您可以像这样调用它的函数:(我想您的第二个按钮会调用)

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

在您的 parent 组件中:

onClick(){
  this.buttonMessage = true;

在你的child中:

@Input() buttonMessage: boolean;

还有一个 ngOnChanges:

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