Question

我创建了以下自定义按钮组件。单击此按钮我想重置表单。但是当我执行点击操作时，我收到一个错误：

“ERROR TypeError：无法读取未定义的属性'reset'”

（因为重置是功能）。

请帮我理解我哪里出错了。

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

@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

您需要将函数上下文绑定到父组件类，例如：

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

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

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

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

然后在组件的清除按钮

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

Answer 2

您需要在自定义组件中声明输出并在另一个中处理它，如下所示：

自定义组件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();
   }
}

这里的$ event是我们在emit函数中传递的值，这在你的情况下是没用的。

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

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

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

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

@Input绑定功能

2 个答案: