新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何編寫一個(gè)完整的Angular4FormText組件
本文主要介紹了如何編寫一個(gè)完整的Angular4 FormText 組件,分享給大家,也給自己留個(gè)筆記
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了紹興免費(fèi)建站歡迎大家使用!
組件定義
import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; @Component({ selector: 'form-text', template: ``, providers: [ { provide:NG_VALUE_ACCESSOR, useExisting:forwardRef(()=>FormTextComponent), multi:true } ] }) export class FormTextComponent implements ControlValueAccessor { @Input() label:string = ''; @Input() placeholder: string=''; @Output() onChange: EventEmitter{{label}}: = new EventEmitter (); 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) { // } }
組件使用
{{mobile}}
需要注意的點(diǎn):
1.需要配置組件的providers
2.需要實(shí)現(xiàn)ControlValueAccessor接口
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱:如何編寫一個(gè)完整的Angular4FormText組件
文章分享:http://fisionsoft.com.cn/article/ipdphc.html