@Input Bindung für Funktion

Question

Ich habe folgende benutzerdefinierte Schaltfläche Komponente erstellt. Mit einem Klick auf diesen Button möchte ich das Formular zurücksetzen. Aber wenn ich eine Klickaktion ausführe, erhalte ich einen Fehler:

(als Reset ist eine Funktion).

Bitte helfen Sie mir zu verstehen, wo ich falsch liege.

Folgende ist mein Code benutzerdefinierte Komponente Code

@Input() clearFormData: any; 

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

ich oben Komponente verwenden wie diese

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

Sie benötigen Ausgabe in Ihrer benutzerdefinierten Komponente zu erklären, und es in der anderen wie folgt zu behandeln:

Benutzerdefinierte Komponente HTML-Datei:

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

Benutzerdefinierte Komponente Typoskript-Datei:

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

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

Sie können es wie folgt verwenden:

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

, wo der $ event hier ist der Wert, den wir es in emittieren Funktion übergeben, die nicht sinnvoll, in Ihrem Fall ist.

Kann ich mehr als ein @output in meiner benutzerdefinierten Komponente haben? kann ich das tun, wenn meine benutzerdefinierte Komponente mehr als eine Schaltfläche hat?

Answer 2

Sie müssen die Funktionen Kontext der Eltern Komponentenklasse binden, zum Beispiel:

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

jetzt können Sie clearForm die Funktion woanders übergeben d Der Ausführungskontext bleibt in der Klasse, von der Sie ihn übergeben haben.

Allerdings würde ich für diese Art der Operation lieber eine @Output von der untergeordneten Komponente verwenden. Zum Beispiel

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

dann in die Clear-Taste der Komponente

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