如何編寫一個(gè)完整的Angular4 FormText 組件
更新時(shí)間：2017年11月18日 16:33:58 作者：mntx
本篇文章主要介紹了如何編寫一個(gè)完整的Angular4 FormText 組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文主要介紹了如何編寫一個(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接口
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angularjs1.X 重構(gòu)controller 的方法小結(jié)
這篇文章主要介紹了angularjs1.X 重構(gòu)controller 的方法小結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
AngularJS基礎(chǔ) ng-mouseover 指令簡單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎(chǔ)知識(shí),并附代碼示例,有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
AngularJS開發(fā)教程之控制器之間的通信方法分析
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS控制器之間通信的三種常用方式及相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了AngularJS指令用法,較為詳細(xì)的分析了AngularJS指令的功能、用法及自定義指令的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個(gè)插件是要實(shí)現(xiàn)一個(gè)pdf顯示的功能，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-01-01
Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用（三）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ClassProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular 4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了詳解AngularJS中的表格使用,作為熱門的JavaScript框架,AngularJS中提供的表格功能十分強(qiáng)大,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了淺談angular.copy() 深拷貝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09