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

最新推荐文章于 2024-08-02 16:18:38 发布

一路斜阳

最新推荐文章于 2024-08-02 16:18:38 发布

阅读量3.5k

点赞数

分类专栏： Angular2

本文链接：https://blog.csdn.net/zhaoruda/article/details/79690329

版权

本文介绍如何在Angular2中创建自定义组件并实现双向数据绑定。通过实现ControlValueAccessor接口，组件可以接收并响应[(ngModel)]指令。关键点包括使用NG_VALIDATORS提供Validator，使用useExisting避免重复provider，以及利用forwardRef处理依赖注入时的组件未初始化问题。组件的核心方法是writeValue和registerOnChange，它们分别用于设置组件内部值和监听值变化。

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

在Angular2中的数据流动是单向的，我们常见的双向绑定的例子如下：

<input [(ngModel)]="value"/>

等价于

<input [ngModel]="value" (ngModelChange)="valueChange($event)"/>

那么我们如何实现自定义自己的组件，该组件也可以接受[(ngModel)]来实现双向绑定呢？首先来看组件的定义代码：

@Component({
  selector: 'app-two-way',
  template: `<input [(ngModel)]="value">`,
  styleUrls: ['./two-way.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TwoWayComponent),
    multi: true,
  }],
})
export class TwoWayComponent implements ControlValueAccessor {
  private innerValue: any = '';
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  get value(): any {
    return