Angular4 自定义组件实现ngModel双向数据绑定教程

"这篇教程介绍了如何在Angular 4中为非`input`元素自定义组件实现`ngModel`双向数据绑定。" 在Angular框架中，通常我们使用`[(ngModel)]`来实现在`input`元素上的双向数据绑定，但有时我们需要在自定义组件上也实现这种功能。以下是如何在Angular 4中为非`input`元素的自定义组件实现`ngModel`双向数据绑定的步骤： 首先，场景是这样的：父组件可以通过`ngModel`将数据传递给自定义组件，并能接收到自定义组件更改后的新值。在HTML模板中，可以这样引用自定义组件： ```html <app-child [(ngModel)]="appData"></app-child> ``` 为了实现这个功能，自定义组件（这里以`app-child`为例）需要遵循以下步骤： 1. 引入必要的模块： 需要导入`Component`, `forwardRef`, `ControlValueAccessor`, 和 `NG_VALUE_ACCESSOR`。这些模块分别来自`@angular/core`和`@angular/forms`。 2. 在自定义组件类中实现`ControlValueAccessor`接口： 这个接口提供了双向数据绑定所需的方法和属性。例如： ```typescript export class ChildComponent implements ControlValueAccessor { // ... private _data: any; // 控制器用于接收父组件的初始值 writeValue(val: any): void { this._data = val; } // 注册变化处理函数，当内部数据改变时调用 registerOnChange(fn: any): void { this.change = fn; } // 注册 touched 处理函数，当组件失去焦点时调用 registerOnTouched(fn: any): void {} // 更新数据并通知父组件 set childData(value: number) { this._data = value; this.change(this._data); } // 获取数据 get childData() { return this._data; } // ... } ``` 3. 提供`NG_VALUE_ACCESSOR`： 在组件的`providers`数组中提供`NG_VALUE_ACCESSOR`，并使用`forwardRef`来确保依赖注入正确工作： ```typescript @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ChildComponent), multi: true } ] }) ``` 4. 在组件的模板中（`child.component.html`），根据组件的具体需求编写业务逻辑，确保当内部数据发生变化时，`change`方法会被调用，从而更新父组件的数据。 通过以上步骤，自定义组件`app-child`就能够接收和传递`ngModel`的数据，实现了双向数据绑定。这使得自定义组件可以像`input`元素一样方便地集成到Angular应用中，与其他组件进行数据交互。