在Angular中如何实现自定义的双向数据绑定

对于Angular的一个特性，就是数据双向绑定。

@Input绑定

对于一个component，他里面定义了@Input()标识的属性，这些属性用来接收对应的html标签中attribute的值。如：

// 在component中定义custom
@Input() custom: string;

// 在标签中使用

<xxx  custom="dawang"></xxx>

通过这样的用法就可以给component中的custom赋值，内容是“dawang”。这样只是静态赋值，没有实现数据的绑定。数据的单向绑定是使用[], 如：

<xxx [custom]="data"></xxx>

其中data是ts文件中定义的一个变量，假设给data赋值： data='dawang'，这样，通过数据的单向绑定[]，在component中的custom的值就是'dawang'，而不是data。数据绑定的是变量，通过绑定就可以把变量的内容传入component中。

@Output绑定

既然是双向绑定，有input肯定就有output了。

在angular的component中可以定义@Output标识的EventEmitter对象。如：

@Output() update = new EventEmitter();

在html中就可以这样使用

<xxx (update)="doUpdate($event)"></xxx>

// ts中定义doUpdate方法

doUpdate(event:any) {
    // do something
}

此时的update就是用来做反向绑定的属性，将doUpdate绑定到update上，以此来接收从component中传出的update的值。update的传值需要手动触发

this.update.emit('ok');

手动触发后，就可以在doUpdate中获取此值，其中event的值就是'ok'。

至此，我们看到了angular数据的正向和反向的绑定，但两者是分开的，所以都叫单向绑定，那么怎么才能双向绑定呢。

双向绑定

同时使用]就是实现双向绑定的方式，使用双向绑定的同时，还需要对component进行改造。

@Input() custom: string;
// 增加下面的output绑定
@Output() customChange = new EventEmitter();

这样就可以实现[(custom)]的双向绑定。通过component代码可以发现，[(custom)]等效于

<xxx [custom]="data" (customChange)="data = $event"></xxx>

实现双向绑定的必要约束就是output的变量必须是input变量名+Change，必须严格遵守这个约束，否则无法实现双向绑定。

Author ：笑笑粑粑  
曾用网名：TinyKing  
微信公众号：Java码农  
知乎专栏： 爱笑笑爱分享  
个人博客： 爱笑笑，爱生活  
自我评价： 一个爱好广泛的CRUD程序猿 ^_^