Detaillierte Erläuterung der Implementierungsmethode einer vollständigen Angular4 FormText-Komponente

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:

1. Sie müssen die Anbieter konfigurieren der Komponente

Verwandte Empfehlungen:

Angular4 Form Response Function Beispielanalyse

CSS-Stil der Vorgehensweise Inhalte in Angular4 anzeigen Beispielcode

Detailliertes Beispiel der Routing-Router-Klasse in Angular4

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsmethode einer vollständigen Angular4 FormText-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!