[英]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装饰器,但是我不知道如何正确使用。
甚至更容易:给您的孩子一个模板引用,您可以像这样调用它的功能:( 我想您的第二个按钮将进行调用)
<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>
在您的父组件中:
onClick(){
this.buttonMessage = true;
在您的孩子中:
@Input() buttonMessage: boolean;
和ngOnChanges:
ngOnChanges(changes: any) {
if(changes.buttonMessage.currentValue){
this.onSubmit();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.