我正在尝试从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());
}