angular中自定义组件实现双向绑定

最新推荐文章于 2024-08-20 17:32:19 发布

mad_coding

最新推荐文章于 2024-08-20 17:32:19 发布

阅读量4.2k

点赞数

分类专栏： angular 文章标签： angular javascript

本文链接：https://blog.csdn.net/mad_coding/article/details/77711787

版权

本文介绍了在Angular中如何使用get和set关键字实现自定义组件的双向绑定。通过get方法返回父组件更新后的值，set方法则在组件值变化后通知父组件。此外，还利用output和EventEmitter绑定事件进行信息传递。在父组件中引用时，需要注意如果双向绑定数据不是[(ngModel)]，则需要绑定的是[check]属性。

摘要由CSDN通过智能技术生成

使用get,set关键字

get返回父组件变化后的值
set为组件值产生变化后父组件改变

import {Input, Output } from '@angular/core';
........
this.myModelValue : boolean;
@Input()
get myModel(){
 return this.myModelValue;
}
set myModel(val:boolean){
  this.myModelValue = val;
  this.myModelChange.emit(this.myModelValue);
}

@Output() myModelChange:EventEmitter<string> = new EventEmitter<string>();