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

最新推荐文章于 2022-09-13 17:37:17 发布

遗忘了的自己

最新推荐文章于 2022-09-13 17:37:17 发布

阅读量827

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_24078843/article/details/118336966

版权

本文介绍了在Angular自定义组件中如何实现ngModel的双向绑定。通过自定义组件属性和[(ngModel)]指令，利用writeValue()、registerOnChange()和registerOnTouched()方法来确保组件值的同步更新。

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

1. 自定义组件属性实现值的双向绑定

// 1. 自定义组件中定义需要双向绑定的值
// 参考：https://angular.cn/guide/two-way-binding
  @Input() userName: string;
  // Output中EventEmitter类型属性的名字必须为 Input属性对应名字+Change
  // 属性名 + Change 构成事件属性名，固定写法才能使用双向绑定 [(userName)]
  @Output() userNameChange = new EventEmitter<string>();
  /**
   * change  userName 改变时，通过 userNameChange 发送事件通知
   */
  public change(userName: string) {
   
    this.userNameChange.emit(this.