Quelles sont les étapes nécessaires pour implémenter un composant Angular4 FormText complet ?

Cette fois, je vais vous présenter les étapes nécessaires pour implémenter un composant Angular4 FormText complet, et quelles sont les précautions pour implémenter un composant Angular4 FormText complet. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Cet article présente principalement comment écrire un composant Angular4 FormText complet, le partager avec tout le monde et laisser une note pour vous-même

Définition du composant

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) {
  //
 }
}

Utilisation des composants

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

Points à noter :

Vous devez configurer les fournisseurs du composant
Vous devez implémenter l'interface ControlValueAccessor                                        

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment js correspond et calcule la taille de la police

Données modales à chargement unique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!