Schreiben Sie eine vollständige Angular4 FormText-Komponentenmethode

In diesem Artikel wird hauptsächlich das Schreiben einer vollständigen Angular4-FormText-Komponente vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 = &#39;&#39;;
 @Input() placeholder: string=&#39;&#39;;

 @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:

Müssen die Anbieter der Komponente konfiguriert werden
2.Müssen die ControlValueAccessor-Schnittstelle implementieren

Verwandte Empfehlungen:

Ausführliche Erläuterung zum Abonnement und zur Kündigung von Angular4

Ausführliche Erläuterung zum tatsächlichen Projektaufbau von Angular4

So lösen Sie die Warnung wann Angular4 bindet HTML-Inhalte

Das obige ist der detaillierte Inhalt vonSchreiben Sie eine vollständige Angular4 FormText-Komponentenmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!