如何绑定Ionic Angular自定义组件的数值与事件处理函数

要实现自定义组件支持ngModel双向绑定和事件透传，核心是给自定义组件实现Angular的ControlValueAccessor接口（Angular表单体系的标准适配接口），具体步骤如下：

1. 编写自定义组件模板 #

把固定配置的ion-datetime属性直接写在组件模板里，绑定内部值和变更事件：

<!-- my-datetime.component.html -->
<ion-datetime 
  displayFormat="DD/MMM/YYYY" 
  pickerFormat="DD MMM YYYY"
  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Ago, Set, Out, Nov, Dez"
  doneText="Selecionar"
  cancelText="Cancelar"
  [(ngModel)]="innerValue"
  [name]="name"
  [disabled]="disabled"
  (ionChange)="handleInnerChange($event)"
>
</ion-datetime>

2. 编写组件逻辑代码 #

实现ControlValueAccessor接口，同时透传输入属性和输出事件：

// my-datetime.component.ts
import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'my-datetime',
  templateUrl: './my-datetime.component.html',
  // 注册为表单值访问器
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyDatetimeComponent),
      multi: true
    }
  ]
})
export class MyDatetimeComponent implements ControlValueAccessor {
  // 透传name属性
  @Input() name: string;
  // 可选扩展：如果需要支持min、max等属性，新增对应@Input()绑定到内部ion-datetime即可
  @Input() disabled: boolean = false;

  // 透传ionChange事件
  @Output() ionChange = new EventEmitter<any>();

  // 内部绑定的变量
  innerValue: any = null;

  // ControlValueAccessor要求的回调函数
  private onChange = (value: any) => {};
  private onTouched = () => {};

  // 外部值更新时同步到内部组件
  writeValue(value: any): void {
    if (value !== undefined && value !== null) {
      this.innerValue = value;
    }
  }

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

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

  // 透传禁用状态
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  // 内部日期变更时同步到外部
  handleInnerChange(event: any): void {
    this.innerValue = event.detail.value;
    // 同步值给表单绑定
    this.onChange(this.innerValue);
    // 透传原始事件给外部调用方
    this.ionChange.emit(event);
    this.onTouched();
  }
}

3. 注册组件 #

在对应的Angular模块中声明该组件，如果需要跨模块使用，需要同时加入exports数组：

// 对应模块的module.ts
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { MyDatetimeComponent } from './my-datetime.component';

@NgModule({
  declarations: [MyDatetimeComponent],
  imports: [IonicModule, FormsModule],
  exports: [MyDatetimeComponent] // 跨模块使用时必须加
})
export class MyDatetimeModule {}

最终使用方式 #

和预期的调用方式完全一致：

<my-datetime 
  [(ngModel)]="myProperty" 
  name="data"
  (ionChange)="myChangeHandler()"
></my-datetime>

该实现同时兼容响应式表单的formControlName用法，无需额外修改。

内容的提问来源于stack exchange，提问作者Marlon