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

使用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;
    }
  }

你可能感兴趣的:(angular)