Angular中怎么自定义双向数据绑定

本篇文章给大家分享的是有关Angular中怎么自定义双向数据绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联建站专注于中大型企业的成都做网站、成都网站建设和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户上千家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注高端网站设计和互联网程序开发,在前进的路上,与客户一起成长!

@Input绑定

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

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

// 在标签中使用


 

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


 

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

 

@Output绑定

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

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

@Output() update = new EventEmitter();
 

在html中就可以这样使用



// 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)]等效于


 

以上就是Angular中怎么自定义双向数据绑定,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


本文名称:Angular中怎么自定义双向数据绑定
转载来于:http://myzitong.com/article/pjpsic.html