CKEditor 5 - Angular 7:对象ngModel与子子项问题的绑定

Question

1- 首先这是我的代码：

---

列表页面组件：

export class ListPagesComponent {
public model = {
id: -1,
actif: 0,
link: '',
htmlContent: {
fr: '',
en: ''
},
title: {
fr: '',
en: ''
}
};    
updatePage() {
this.model = {
id: -1,
actif: 0,
link: 'my-link',
htmlContent: {
fr: 'Salut tout le monde',
en: 'hello welcome'
},
title: {
fr: 'title1',
en: 'title2'
}
};
console.log(this.model);
}
}

listpages.component.html - CKeditors in the 同一页面：

<ckeditor name="content" 
[editor]="editor1" 
data=" " 
(ready)="onReady($event) 
[config]="editorConfig" 
[(ngModel)]="model.htmlContent[langs.fr]">
</ckeditor>
<ckeditor name="content" 
[editor]="editor1" 
data=" " 
(ready)="onReady($event)" 
[config]="editorConfig" 
[(ngModel)]="model.htmlContent[langs.en]">
</ckeditor>

---

2-问题说明：当我单击执行updatePage((的按钮时，我希望在控制台中得到的结果：更新的 html 的正确新值frensh 和英语语言的内容，例如：

actif: 0
htmlContent:
en: "<p>hello welcome</p>"
fr: "<p>Salut tout le mond</p>" <==== THE Expected Result
id: -1
link: "my-link"
title: {fr: "title1", en: "title2"}

问题是给定的结果是：

actif: 0
htmlContent:
en: "<p>hello welcome</p>"
fr: "<p>hello welcome</p>"   <==== THE ISSUE IS HERE 
id: -1
link: "my-link"
title: {fr: "title1", en: "title2"}

---

我希望我的问题很清楚。

Answer 1

我解决了我的问题： 老实说，我不确定它是否是 CKEditor5多实例循环寿命错误，但为了解决这个问题，我刚刚创建了一个新组件以供重用，其中包含一个CKEditor 组件实例，我传递给它一个输入/输出字符串属性以区分不同的语言内容(FR、EN 等(， 我只是在父组件中使用了这个组件，其中包含编辑器的模态。 所以这是我的代码解决方案：

---

新添加的HTMLEditorComponent：

export class HTMLEditorComponent implements OnInit {
/** Global Props **/
public editor1 = DecoupledEditor;
@Input() content: string;
@Output() contentChange: EventEmitter<string> = new EventEmitter();
langs = {
fr: 'fr',
en: 'en',
};
/** editor configuration **/
public editorConfig = {
placeholder: 'Ecrire votre contenu ici!',
};
constructor() {
}
ngOnInit() {
}
/**
* Init Global Page Editor
* @param editor
*/
public onReady(editor) {
this.initEditor(editor);
}
/**
* Init editor ui & toolbar
* @param editor
*/
private initEditor(editor) {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement(),
);
}
/**
* Update out changes
*/
onChange() {
console.log(this.content);
this.contentChange.emit(this.content);
}

它的视图htmleditor.component.html：

<ckeditor name="content"
[editor]="editor1" data=" " (ready)="onReady($event)"
[(ngModel)]="content"
[config]="editorConfig"
(ngModelChange)="onChange()"
></ckeditor>

父组件列表页面组件：

export class ListPagesComponent implements OnInit {
// other codes here ...
/** List of available extensible langages **/
langs = {
fr: 'fr',
en: 'en',
};
/** Page Editor props **/
page: Page = new Page();
selectedLanguage: string = this.langs.fr;
// other codes here ...
// other codes here ...
/**
* Modifier Page
*/
updatePage() {
this.showAddModal();
//  update request
}
// other codes here ..
// other codes here ..
}

这就是我在父 ListPagesComponent html 视图中使用 HtmlEditorComponent 的方式：

// for frensh language
<app-htmleditor [(content)]="page.htmlContent[langs.fr]"></app-htmleditor>
// for English language
<app-htmleditor [(content)]="page.htmlContent[langs.en]"></app-htmleditor>

我希望我的解决方案对谁的使用 CKeditor5 :)有好处。