Angular自定义组件实现ngModel双向绑定

1.自定义组件ts

@Component({
  selector: 'app-custom-tree',
  templateUrl: './custom-tree.component.html',
  styles: [],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomTreeComponent),
    multi: true
  }]
})
export class CustomTreeComponent implements OnInit, ControlValueAccessor {
  dataTrees: NzTreeNodeOptions[] = [];
  @Output() selectTreechange = new EventEmitter<any>();
  onChangeListener; // 改变值回调
  onTouchedListener; // 交互回调
  isDisabled: boolean;
  _checkNode: string[];
  checkKeys: string[];
  constructor(private service: customService) { }

  //#region  值双向绑定
  writeValue(obj: any): void {
    this.checkKeys = obj;//obj就是由调用此组件处的ngModel传入的值
  }
  registerOnChange(fn: any): void {
    this.onChangeListener = fn; // 保存这个函数
  }
  registerOnTouched(fn: any): void {
    this.onTouchedListener = fn; // 保存这个函数
  }
  setDisabledState?(isDisabled: 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值