如何在ControlValueAccessor组件中包装ngx-monaco editor

npm install ngx-monaco-editor monaco-editor

ng generate component MonacoEditorWrapper

<ngx-monaco-editor [(ngModel)]="editorValue"></ngx-monaco-editor>

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

@Component({
  selector: 'app-monaco-editor-wrapper',
  templateUrl: './monaco-editor-wrapper.component.html',
  styleUrls: ['./monaco-editor-wrapper.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MonacoEditorWrapperComponent),
      multi: true
    }
  ]
})
export class MonacoEditorWrapperComponent implements ControlValueAccessor, OnInit {
  editorValue: string;
  onChange: any = () => {};
  onTouched: any = () => {};

  constructor() { }

  ngOnInit(): void {
  }

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

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

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

  onEditorValueChange(): void {
    this.onChange(this.editorValue);
  }

  setDisabledState?(isDisabled: boolean): void {
    // Implement this method if needed
  }
}

<app-monaco-editor-wrapper [(ngModel)]="editorContent"></app-monaco-editor-wrapper>

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent {
  editorContent: string;

  constructor() { }

  // Other methods and logic
}