javascript - ExpressionChangedAfterItHasBeenCheckedError:在从ckEditor获取值时检查表达式后，表达式已更改

我正在尝试从ckEditor获取更改的值即文本，并将结果输出发送给父级。

下面是相应的代码：

editor.component.html：

 <ckeditor  tagName="textarea" [config]="config"
            [data]="text" (change)="onValueChange($event)" formControlName="text"></ckeditor>

editor.component.ts

export class TextEditorWithLimitedWidgetsComponent implements OnInit, AfterViewChecked, OnChanges  {

constructor(
private fb: FormBuilder,
private fileValidations: FileValidations,
private cdref: ChangeDetectorRef
) { }



@Input() text: string;

@Output() textValue = new EventEmitter();

form: FormGroup;

ngOnInit() {

this.form = this.fb.group({
  text: ['', [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});

  this.form.setValue({
    text: this.text
  });
}


get f() {
return this.form.controls;
}

ngAfterViewChecked() {
  // this.textValue.emit(this.form.controls);
// this.cdref.detectChanges();
//
//  not working...
}


onValueChange(e) {

    this.cdref.detectChanges();
 }


ngOnChanges(changes: SimpleChanges): void {
  this.textValue.emit(this.form.controls);
 }
}

parent.component.html

            <app-editor [descriptionLimit]="50"  [text]="inputData.title" (input)="(inputData.title = $event.target.value);" (textValue)="getTextValue($event)"></app-editor>

parent.compoent.ts

 getTextValue(event) {


   const dataWithHTMLTags = event.text.value.toString();
   this.inputData.title = this.fileValidations.stringsWithoutHTMLTags(dataWithHTMLTags);


    console.log(this.inputData.title); // error..
  }

我也尝试了ngAfterContentChecked，但最终出现相同的错误。

最佳答案

Output发出内部生命周期方法导致您的问题。
textValue应该发出控件对象还是仅ckeditor控件的值？
您可以通过以下方式简化表单初始化

this.form = this.fb.group({
  text: [this.text, [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});
}

onValueChange(e) {
    this.cdref.detectChanges();
 }

不必要，角度事件本身会触发变化检测

(input)="(inputData.title = $event.target.value);"

无法使用，您的组件中没有定义名为@Output的input。

查看此documentation进行组件交互

如果我猜对了，你会这样做
ckeditor-change

onValueChange({ editor }: ChangeEvent): void {
   this.textValue.emit(editor.getData());
}