@功能的输入绑定

Question

我已经创建了以下自定义按钮组件。点击这个按钮我想重置表单。但是当我执行点击操作时，出现错误：

"ERROR TypeError: Cannot read property 'reset' of undefined"

（因为重置是功能）。

请帮我理解我的错误。

以下是我的代码自定义组件代码

@Input() clearFormData: any; 

<button *ngIf="cancelRequired" type="button" class="btn btn-warning pull-right" 
     (click)="clearFormData()" style="margin-left:0.3em">Cancel</button> 

我使用上述组件这样

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-model-driven', 
    template: '<form-actions [clearFormData] ="clearForm"></form-actions>', 
    styleUrls: ['./model-driven.component.css'] 
}) 
export class ModelDrivenComponent implements OnInit { 
    clearForm() { 
    this.form.reset(); 
    } 

Answer 1

您需要在您的自定义组件声明输出，并在另一个这样的处理：

自定义组件的HTML文件：

<button *ngIf="cancelRequired" type="button" class="btn btn-warning pull-right" 
    (click)="clearFormData()" style="margin-left:0.3em">Cancel</button> 

定制元件打印稿文件：

@Output() onReset:EventEmitter<string> = new EventEmitter<string>(); 

clearFormData(){ 
    this.onReset.emit(''); 
} 

您可以使用它像这样：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, FormBuilder, Validators } from 
'@angular/forms'; 

@Component({ 
    selector: 'app-model-driven', 
    template: '<form-actions (onReset) ="clearForm($event)"></form-actions>', 
    styleUrls: ['./model-driven.component.css'] 
}) 
export class ModelDrivenComponent implements OnInit { 
    clearForm() { 
     this.form.reset(); 
    } 
} 

其中这里的$事件是我们在发射功能，这是不是在你的情况下有用通过了它的价值。

我的自定义组件中可以有多个@output吗？ 如果我的自定义组件有多个按钮，我可以这样做吗？

@Output() onBack: EventEmitter<string> = new EventEmitter<string>(); 

    backPage() { 
    this.onBack.emit(''); 
    } 

<form-actions [cancelRequired]="true" 
    (onReset)="clearForm()" (onBack)="backPageCalled()"></form-actions> 

Answer 2

您需要绑定的功能方面给母公司组件类，例如：

constructor(){ 
    this.clearForm = this.clearForm.bind(this); 
} 

现在你可以通过clearForm函数在别的地方它的执行上下文将保留在你传递它的类中。

但是，对于这种操作，我建议宁愿使用子组件中的@Output。例如

(clearFormData)="this.form.reset()" 

然后在组件的清除按钮

(click)="this.clearFormData.emit()"