詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法

第詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法在Angular中，對于表單元素，通過[(ngModel)]即可以簡單地實現(xiàn)雙向綁定。對于自定義組件而言，希望實現(xiàn)同樣的效果可以怎么做呢？

1實現(xiàn)自定義組件的ngModel指令

如果希望自定義組件能夠具有與表單元素相同的ngModel效果，可以通過在組件內(nèi)實現(xiàn)ControlValueAccessor接口達到目的。

對于[(ngModel)]，需要至少實現(xiàn)該接口的如下方法：

interfaceControlValueAccessor{

writeValue(obj:any):void

registerOnChange(fn:any):void

registerOnTouched(fn:any):void

最簡單的核心實現(xiàn)示例參考如下。

import{ControlValueAccessor}from'@angular/forms/src/directives';

import{Component,forwardRef,Input}from'@angular/core';

import{NG_VALUE_ACCESSOR}from'@angular/forms';

@Component({

selector:'custom-input',

template:`input[(ngModel)]="value"/`,

providers:[

provide:NG_VALUE_ACCESSOR,

useExisting:forwardRef(()=UnionInputComponent),

multi:true

exportclassCustomInputComponentimplementsControlValueAccessor{

constructor(){}

privateinnerValue:any='';

privateonTouchedCallback:()=void=function(){};

privateonChangeCallback:(_:any)=void=function(){};

getvalue():any{

returnthis.innerValue;

setvalue(v:any){

if(v!==this.innerValue){

this.innerValue=v;

this.onChangeCallback(v);

*modelview-viewvalue

writeValue(value:any){

if(value!==this.innerValue){

this.innerValue=value;

*viewvalue-modelvalue

registerOnChange(fn:any){

this.onChangeCallback=fn;

registerOnTouched(fn:any){

this.onTouchedCallback=fn;

2使用get/set關(guān)鍵字實現(xiàn)父子組件的雙向綁定

其實實現(xiàn)雙向綁定內(nèi)部的本質(zhì)原理就是父子組件的事件綁定機制。簡單舉例如下。

2.1自定義子組件定義

import{Input,Output,Component,EventEmitter}from'@angular/core';

@Component({

selector:'custom-input',

template:`input[(ngModel)]="innerValue"/`,

exportclassCustomInputComponent{

innerValue;

@Input()

gettwoWayModel(){

returnthis.innerValue;

settwoWayModel(val){

this.innerValue=val;

this.twoWayModelChange.emit(this.innerValue);

@Output()twoWayModelChange:EventEmitterstring=newEventEmitter/stringstring

2.2使用自定義組件

在需要使用組件的地方，通過[(twoWayModel)]即可實現(xiàn)雙向綁定的效果。

import{Input,Output}from'@angular/core';

import{Component,forwardRef,Input}from'@angular/core';

@Component({

selector:'custom-input',

template:`custom-input[(twoWayModel)]="inputValue"(twoWayModelChange)="onInputValueChange($event)"/custom`

exportclassabcComponent{

inputValue;

onInputVa