在使用其他组件的组件中使用ngmodelchange

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

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomComponentComponent),
      multi: true
    }
  ]
})
export class CustomComponentComponent implements ControlValueAccessor, OnInit {

  private innerValue: any;
  private onChangeCallback: (_: any) => void;
  private onTouchedCallback: () => void;

  constructor() { }

  ngOnInit() {
  }

  // 写入值
  writeValue(value: any) {
    this.innerValue = value;
  }

  // 注册变化回调函数
  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  // 注册触摸回调函数
  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }

  // 值变化时调用该方法
  onValueChange(value: any) {
    this.innerValue = value;
    this.onChangeCallback(this.innerValue); // 触发外部注册的回调函数
  }

}

<!-- OtherComponent -->
<input [(ngModel)]="otherComponentValue" (ngModelChange)="onOtherComponentValueChange($event)">

<!-- CustomComponent -->
<app-custom-component [(ngModel)]="customComponentValue"></app-custom-component>

export class ParentComponent {

  otherComponentValue: any;
  customComponentValue: any;

  onOtherComponentValueChange(value: any) {
    // 处理其他组件的值变化
    console.log("Other component value changed:", value);
  }

}