我们如何动态加载角度2组件html文件中的tinymce？

Question

我试图在组件中加载TinyMce。当我做一个静态添加iam能够将其添加到html文件中。以同样的方式当iam试图将html标签动态地附加到html文件中时，我无法查看TinyMce。下面给出了用于将TinyMce动态添加到HTML文件中的代码。

＆＃13;

＆＃13;

tiny.component.ts

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';
declare var tinymce: any;
@Component({
  selector: 'simple-tiny',
  templateUrl: 'tiny.component.html'
})
export class SimpleTinyComponent implements AfterViewInit, OnDestroy {
  @Output() onEditorKeyup = new EventEmitter<any>();
  htmlToAdd: string;

  constructor(){
  this.htmlToAdd = '<div class="two">two</div>';
  }
  editor;
  ngAfterViewInit() {
    tinymce.init({
      selector: '.editable',
      plugins: ['link', 'paste', 'table'],
      menubar: false,
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      },
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
  add(){
    this.htmlToAdd = this.htmlToAdd+'<div class="editable1">three</div>';
   this.ngAfterViewInit();
    tinymce.init({
      selector: '.editable1',
      plugins: ['link', 'paste', 'table'],
      toolbar1: 'undo | bold italic |  link forecolor | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect custombutton',
      inline: true,
            setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      }
      });
  }
}

＆＃13;

<h2 class="editable" >Editable header</h2>
<div class="" [innerHtml]="htmlToAdd"></div>
<button (click)='add()'>Add</button>

＆＃13;

＆＃13;

＆＃13;