100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 在Angular中如何实现自定义的双向数据绑定

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

时间:2021-07-15 15:38:18

相关推荐

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

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

@Input绑定

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

//在component中定义custom@Input()custom:string;//在标签中使用<xxxcustom="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=newEventEmitter();

在html中就可以这样使用

<xxx(update)="doUpdate($event)"></xxx>//ts中定义doUpdate方法doUpdate(event:any){//dosomething}

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

this.update.emit('ok');

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

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

双向绑定

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

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

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

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

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

Author :笑笑粑粑

曾用网名:TinyKing

微信公众号:Java码农

知乎专栏: 爱笑笑爱分享

个人博客: 爱笑笑,爱生活

自我评价: 一个爱好广泛的CRUD程序猿 ^_^

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。