Angular 带角度2的模态（ng2-bs3-modal）中的CKEditor

我在angular2项目中遇到了一个奇怪的问题。 我使用情态对话

基本上我有两个视图，一个是带有按钮的列表视图，它打开一个带有一些表单字段和一个ckeditor实例的模式。另一个视图并不重要，但我遇到的问题是在视图更改后发生的

为了在我的项目中使用CKEditor，我包含了来自的Typescript定义

现在神奇发生在我的模态组件中。它有一个

open

函数，由其父组件调用，用于打开模态（并为模态设置一些内容）

如果模式关闭，则调用

取消

函数。 如此简化，我的组件目前看起来如下所示：

import ...
@Component({ ... })

export class MyModalComponent implements OnInit {

   @ViewChild('messageModal')
   private _modal:ModalComponent;

   private _ckEditorInstance:any;

   open(message?:Message) {

        ...

        this._ckEditorInstance = CKEDITOR.replace('ck-editor', {
            allowedContent: 'p a b i u font br ol ul li'
        });

        this._ckEditorInstance.on('instanceReady', () => {
            this._ckEditorInstance.setData(this.currentEditorText);
        });

        this._ckEditorInstance.on('pasteState', () => {
            this.currentEditorText = this._ckEditorInstance.getData();
        });

        ...


        this._modal.open();
        this._ckEditorInstance.setData(this.currentEditorText);
     }

     ...

     cancel() {
         for(let instance in CKEDITOR.instances) {
             CKEDITOR.instances[instance].destroy();
         }

         this._modal.close();
      }
}

问题是： 如果我导航到列表视图并打开模式，一切都会正常工作。我可以关闭模态，再打开它，一切都很好。但是如果我打开它，关闭它，导航到另一个视图，然后再次返回到我的列表视图，单击按钮打开模式，CKeditor

replace

方法或其他方法不起作用，因此我有一个正常的

textarea

，其中应该是CKeditor实例

---

现在，我已经尝试了很多东西，首先，我的cancel函数中没有

销毁逻辑

，这导致了ckeditor的实例错误。 我还尝试导入

RuntimeCompiler

，并在

open

函数中使用

clearCache

函数，如下所示：

this.\u RuntimeCompiler.clearCache（）

，因为我认为这可能是缓存问题。据我所知，此函数清除整个模板缓存，因此如果是缓存问题，则应通过此函数解决（显然不是）

如果有关系，我会通过一个非常基本的

routerLink

导航到列表视图。（我还没有以编程方式尝试routeChange，重新加载站点可能会解决问题，但对我来说是不可能的。） 我考虑过的另一种方法是每次打开（或关闭）模式模板时，将

textarea

删除并添加回模式模板中，但这感觉不太正确，我认为它无法解决问题。我现在可以试试

我现在没有其他想法

---

有什么解决办法吗？感谢您的任何想法或提示。

目前，我找到了一个解决方案，但我还不打算将此设置为可接受的答案，因为这只是一个解决方法，我还不明白为什么这与路线更改有关

我希望有人能提供更好的答案

我所做的是将布尔属性添加到我的组件

textareaInitialized:boolean

在我的模板中，我在textarea包装器上使用

*ngIf

，如下所示：

<div *ngIf="textareaInitialized">
    <textarea name="ck-editor" id="ck-editor"></textarea>
</div>

现在在我的

open

函数中，我将其设置为true，并将

openfunc

代码的其余部分包装在

setTimeout（（）=>…，0）中

在我的

cancel

函数中，我只是将其设置回false。这样，每次打开模式时都会读取textarea，因此初始化CKeditor实例可以正常工作