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

原创于 2017-08-30 11:04:08 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #javascript

angular 专栏收录该内容

1 篇文章

订阅专栏

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

使用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>();

output绑定事件，由组件绑定事件EventEmitter向父组件传输信息，属性名+属性后缀Change 是约定的固定写法

在父组件引用

<agree-provision [(myModel)]="myModel" ></agree-provision>

值得注意的是，如果组件双向绑定数据非[(ngModel)]，在改变值的时候，组件改变model值，不是改变modelValue（此时需要绑定的是[check]属性）

agree(event:Event) {
    if (!this.checkedStatu) {
      this.myModel = true ;
    } else {
      this.myModel = false;
    }
  }