javascript - ExpressionChangedAfterItHasBeenCheckedError : Expression has changed after it was checked while getting the value from ckEditor

Question

我正在尝试获取更改后的值，即来自 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>

父组件.ts

 getTextValue(event) {


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


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

我也尝试过 ngAfterContentChecked 但最终还是出现了同样的错误。

Answer 1

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

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

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

不是必需的， Angular 事件本身会触发变化检测

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

不会工作，您的组件中没有定义名为 input 的 @Output。

看看这个documentation用于组件交互

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

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