TinyMce in Angular 2

Question

我想在我的應用程序中實現TinyMce。那麼，tinymce顯示正常，但是當我從tinymce頁面路由到另一頁面時，它會拋出如下錯誤。我的代碼行中可能缺少什麼？感謝

錯誤

Uncaught (in promise): TypeError: elem is null 

[650]/EmailComponent.prototype.ngOnDestroy@http://localhost:4200/main.bundle.js:1794:9 

anonymous/Wrapper_EmailComponent.prototype.ngOnDestroy@/AppModule/EmailComponent/wrapper.ngfactory.js:12:3 

部件

import { Component, ElementRef, OnInit, EventEmitter, Output, Inject, ComponentRef } from '@angular/core'; 
import { Http } from '@angular/http'; 

declare var tinymce: any; 

@Component({ 
    selector: 'editor', 
    template: `<div id="tinyFormGroup" class="form-group"> 
    <div class="hidden"> 
     <textarea id="baseTextArea">{{htmlContent}}</textarea> 
    </div> 
</div>`, 
    inputs: ['mceContent'], 
    outputs: ['contentChanged'] 
}) 

// source of this module - 
// http://www.unitydatasystems.com/blog/2015/12/16/angular-2-tinymce-wysiwyg-editor/ 

export class EmailComponent { 

    private elementRef: ElementRef; 
    private elementID: string; 
    private htmlContent: string; 

    public contentChanged: EventEmitter<any>; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) 
    { 
     this.elementRef = elementRef; 

     var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26)); 
     var uniqid = randLetter + Date.now(); 

     this.elementID = 'tinymce' + uniqid; 
     this.contentChanged = new EventEmitter(); 
    } 

    ngAfterViewInit() 
    { 
     //Clone base textarea 
     var baseTextArea = this.elementRef.nativeElement.querySelector("#baseTextArea"); 
     var clonedTextArea = baseTextArea.cloneNode(true); 
     clonedTextArea.id = this.elementID; 

     var formGroup = this.elementRef.nativeElement.querySelector("#tinyFormGroup"); 
     formGroup.appendChild(clonedTextArea); 

     //Attach tinyMCE to cloned textarea 
     tinymce.init(
      { 
       mode: 'exact', 
       height: 500, 
       theme: 'modern', 
       plugins: [ 
        'advlist autolink lists link image charmap print preview anchor', 
        'searchreplace visualblocks code fullscreen', 
        'insertdatetime media table contextmenu paste code' 
       ], 
       toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
       elements: this.elementID, 
       setup: this.tinyMCESetup.bind(this) 
      } 
     ); 
    } 

    ngOnDestroy() { 
     //destroy cloned elements 
     tinymce.get(this.elementID).remove(); 

     var elem = document.getElementById(this.elementID); 
     elem.parentElement.removeChild(elem); 
    } 

    tinyMCESetup(ed) { 
     ed.on('keyup', this.tinyMCEOnKeyup.bind(this)); 
    } 

    tinyMCEOnKeyup(e) { 
     this.contentChanged.emit(tinymce.get(this.elementID).getContent()); 
    } 

    set mceContent(content) { 
     this.htmlContent = content; 
    } 
} 

Answer 1

ID爲元件 「this.elementID」 不存在且比ELEM = NULL，而不是HTML元素

var elem = document.getElementById(this.elementID);