本文主要介紹了如何編寫一個(gè)完整的Angular4 FormText 組件，分享給大家，也給自己留個(gè)筆記

組件定義

import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core';import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';@Component({ selector: 'form-text', template: `  <div >    <label>{{label}}：</label>    <input type="text" [(ngModel)]="value"    placeholder="{{placeholder}}" >  </div> `, 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) {  // }}

組件使用

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

需要注意的點(diǎn)：

1.需要配置組件的providers
2.需要實(shí)現(xiàn)ControlValueAccessor接口

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。