angular中使用 ngModel 自定义组件

要创建一个自定义的 Angular 组件，并使用 ngModel 进行双向数据绑定，您可以按照以下步骤操作：

创建自定义组件：首先，使用 Angular CLI 或手动创建一个新的组件。在组件的模板中，添加一个输入元素或其他适合您的控件，并为其添加一个唯一的标识符，例如一个模板引用变量。
导入必要的模块和服务：在您的组件类中，导入 ControlValueAccessor 和 NG_VALUE_ACCESSOR。这些是从 @angular/forms 模块中提供的。

typescript 复制代码

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

实现 ControlValueAccessor 接口：为了使您的自定义组件能够与 ngModel 指令一起使用，您需要实现 ControlValueAccessor 接口。该接口定义了一组方法，用于处理控件值的获取和设置，以及处理表单控件状态的更改。您可以实现这些方法以满足您的需求。

typescript 复制代码

@Component({
  selector: 'app-custom-input',
  template: `
    <input type="text" [(ngModel)]="value" (input)="onChange($event.target.value)" [disabled]="isDisabled">
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  private _value: any;
  private _onTouchedCallback: () => void = () => {};
  private _onChangeCallback: (_: any) => void = () => {};
  isDisabled = false;

  writeValue(value: any): void {
    this._value = value;
  }

  registerOnChange(fn: any): void {
    this._onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouchedCallback = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  onChange(value: any): void {
    this._value = value;
    this._onChangeCallback(value);
  }
}

在上面的示例中，我们创建了一个名为 CustomInputComponent 的组件，它实现了 ControlValueAccessor 接口。在模板中，我们使用了一个输入元素，并通过 [(ngModel)] 进行了双向数据绑定。我们还添加了一个 (input) 事件监听器来捕获输入值的变化，并调用 onChange 方法进行处理。此外，我们还实现了 writeValue、registerOnChange、registerOnTouched 和 setDisabledState 方法，以满足 ControlValueAccessor 接口的要求。最后，我们使用 providers 数组将自定义组件注册为 ngModel 指令的合法目标。

使用自定义组件：现在，您可以在父组件中使用自定义组件，并使用 ngModel 指令将其绑定到 Angular 组件中的属性。例如：

html 复制代码

<app-custom-input [(ngModel)]="myValue"></app-custom-input>

在父组件的类中，您可以定义一个名为 myValue 的属性，它将与自定义组件的输入值进行双向绑定。当输入值发生变化时，myValue 属性也会相应更新。此外，您还可以使用 Angular 表单的其他功能，例如验证、错误处理等。