angular 如何实现ng-model

最近在用angular5写项目，刚接触angular，他对于我还是陌生的朋友，最近写了一个组件 用到了ng-model的实现，所以这里简单记录下

比如要创建一个组件叫my-input

1首先 

在@Component配置中添加encapsulation的配置，它有三个值分别是

ViewEncapsulation.None:没有Shadow Dom,样式没有封装，全局可以使用。

ViewEncapsulation.Emulated:angular2的默认值，模仿ShadowDom,通过在标签上增加标识，来固定样式的作用域

ViewEncapsulation.Native:使用原生的Shadow Dom

一般使用默认值ViewEncapsulation.Emulated

2 配置providers

providers:[{

    provide:NG_VALUE_ACCESSOR,

    useExisting:forwardRef(()=>{MyInputComponent}) ，//这里是组件的名字

    multi:true

}]

//@Component完整代码
@Component({
   selector:'app-my-input',
   templateUrl:'./my-input.component.html',
   styleUrls:['./my-input.component.scss'],
   encapsulation:ViewEncapsulation.Emulated,
   providers:[{
     provide:NG_VALUE_ACCESSOR,
     useExisting:forwardRef(()=>MyInputComponent),
     multi:true
   }]
})

 3 MyINputComponent要实现ControValueAccessor这个接口

它有3个方法  writeValue(obj:any):void和registerOnChange(fn:any):void    registerOnTouched(fn:any):void要实现

实现了这三个方法基本就可以实现数据的输出

数据的输入是通过@Input data获取的

export class MyInputComponent implements OnInit,ControlValue{
  @Input() data:string;

  onChange: any=Function.prototype;
  onTouched: any=Function.prototype;
 

  constructor(){}

  writeValue(obj:any):void{
     this.data = obj;
  }

  registerOnChange(fn:any):void{
     this.onChange=fn
  }

  registerOnTouched(fn:any):void{
     this.onTouch=fn
  }
//自定义方法   当数据改变的时候
  dataChange(){
     this.onChange(this.data)
  }

}