Welche Schritte sind erforderlich, um eine vollständige Angular4 FormText-Komponente zu implementieren?

Dieses Mal werde ich Ihnen die Schritte vorstellen, die zum Implementieren einer vollständigen Angular4-FormText-Komponente erforderlich sind, und welche Vorsichtsmaßnahmen zum Implementieren einer vollständigen Angular4-FormText-Komponente gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

In diesem Artikel wird hauptsächlich beschrieben, wie Sie eine vollständige Angular4 FormText-Komponente schreiben, sie mit allen teilen und eine Notiz für sich selbst hinterlassen

Komponentendefinition

import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
 selector: 'form-text',
 template: `
  <p >
    <label>{{label}}：</label>
    <input type="text" [(ngModel)]="value"
    placeholder="{{placeholder}}" >
  </p>
 `,
 providers: [
  {
   provide:NG_VALUE_ACCESSOR,
   useExisting:forwardRef(()=>FormTextComponent),
   multi:true
  }
 ]
})
export class FormTextComponent implements ControlValueAccessor {
 
 @Input() label:string = '';
 @Input() placeholder: string='';
 @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
 
 public innerValue: any;
 public changeFn: Function = () => {};
 
 get value(): any {
  return this.innerValue;
 };
 set value(v: any) {
  if (v !== this.innerValue) {
   this.innerValue = v;
   this.changeFn(v);
  }
 }
 writeValue(value: any) {
  if (value !== this.innerValue) {
   this.innerValue = value;
  }
 }
 registerOnChange(fn: any) {
  this.changeFn = fn;
 }
 registerOnTouched(fn: any) {
  //
 }
}

Komponentenverwendung

<form-text [(ngModel)]="mobile" [placeholder]="placeholder" [label]="label"></form-text>
<p>{{mobile}}</p>

Zu beachtende Punkte:

Sie müssen die Anbieter der Komponente konfigurieren
Sie müssen die ControlValueAccessorSchnittstelle implementieren                                        

Ich glaube, Sie beherrschen die Methode zum Lesen dieses Artikels. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie js die Schriftgröße abgleicht und berechnet

Betriebsmodale Einzelladedaten

Das obige ist der detaillierte Inhalt vonWelche Schritte sind erforderlich, um eine vollständige Angular4 FormText-Komponente zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!