关于angular2双向绑定

1、在自己写的anular组件中可以使用[(x)]的语法,可以分属性x还有时间xChange,详见官方文档-模板语法-双向数据绑定

2、在原生html元素不能使用[(x)]语法,但是angular提供了ngModel指令来实现了某些表单元素的双向绑定

3、关于自定义表单组件

对于前面两种的理解:只要使用了ngModel,就会隐式创建formControl

关于自定义表单组件:有angular已经实现值访问器的angular表单,也可以有自定义组件的angular表单,如果是自定义组件表单,组件就需要实现ControlValueAccessor

什么是ControlValueAccessor:它是原生元素和Angular表单之间的桥梁,将组件或者指令继承ControlValueAccessor的接口就能变成Angular表单使用了。

理解:https://blog.csdn.net/fen747042796/article/details/78880409

使用:

https://segmentfault.com/a/1190000009070500#articleHeader1

https://segmentfault.com/a/1190000012726935

https://www.jianshu.com/p/727ddad21586

实现ControlValueAccessor重写三个方法:

  • writeValue(obj: any):该方法用于将模型中的新值写入视图或 DOM 属性中。也就是formcontrol的值变化后,会执行这个方法。

  • registerOnChange(fn: any):设置当控件接收到 change 事件后,调用的函数。fn为传入的一个改变formcontrol值的方法,把它传递给该自定义组件,在组件值变化时,调用这个changeFn(当然,registerOnChange作用就是要把fn引用赋值保存下来,便于组件使用)。其实打debugger可以看到,这里的fn是forms的setUpViewChangePipeline方法。

  registerOnChange(fn: any) {
    this.changeFn = fn;
  }
  • registerOnTouched(fn: any):设置当控件接收到 touched 事件后,调用的函数。同上,只不过传入的fn不一样。

原文地址:https://www.cnblogs.com/hahlzj/p/11237988.html