Angular 2のTinyMCEコンポーネントを使用しているエラー

Question

私はAgular 2で新しく、プロジェクトでTinyMCEエディターを使用しようとしています。

私はTinyMCEのコンポーネントを作成して使用するためには、この手順に従っ：https://www.tinymce.com/docs/integrations/angular2/

を手順を実行した後、私はTinyMCEの作業を行うことができない、私は次のエラーを取得する：

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'elementId' since it isn't a known property of 'simple-tiny'.

1. If 'simple-tiny' is an Angular component and it has 'elementId' input, then verify that it is part of this module.
2. If 'simple-tiny' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

この私のコードは次のとおりです。

小さな-editor.component.ts

import { Component, OnChanges, AfterViewInit, EventEmitter, OnDestroy, 
Input, Output } from '@angular/core'; 
import 'tinymce'; 
import 'tinymce/themes/modern'; 

declare var tinymce: any; 

@Component({ 
    selector: 'simple-tiny', 
    template: `<textarea id="{{elementId}}"></textarea>` 
}) 
export class TinyEditorComponent implements AfterViewInit, OnDestroy { 
    @Input() elementId: string; 
    @Output() onEditorContentChange = new EventEmitter<any>(); 

    editor; 

    constructor() { } 

    ngAfterViewInit() { 
    tinymce.init({ 
     selector: `#${this.elementId}`, 
     skin_url: '../assets/skins/lightgray', 
     plugins: ['link', 'paste', 'table'], 
     setup: editor => { 
     this.editor = editor; 
     editor.on('keyup change',() => { 
      const content = editor.getContent(); 
      this.onEditorContentChange.emit(content); 
     }); 
     } 
    }); 
    } 

    ngOnDestroy() { 
    tinymce.remove(this.editor); 
    } 

} 

parent.component.html

<simple-tiny [elementId]="'descripcion'" (onEditorContentChange)="keyupHandler($event)"></simple-tiny> 

私はすでにapp.module.tsにコンポーネントをインポート。
angular-cli.jsonに既にスクリプトを追加しました。

私はTinyMCEバージョン4.5.6を使用しています。

何が欠けていますか？

ここに私のapp.module.tsがあります。私はテンプレートを使用しています。 app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 

import { AppComponent } from './app.component'; 
import { BsDropdownModule } from 'ng2-bootstrap/dropdown'; 
import { TabsModule } from 'ng2-bootstrap/tabs'; 
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive'; 

import { ChartsModule } from 'ng2-charts/ng2-charts'; 
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive'; 
import { AsideToggleDirective } from './shared/aside.directive'; 
import { BreadcrumbsComponent } from './shared/breadcrumb.component'; 

// Routing Module 
import { AppRoutingModule } from './app.routing'; 

//Layouts 
import { FullLayoutComponent } from './layouts/full-layout.component'; 
import { SimpleLayoutComponent } from './layouts/simple-layout.component'; 

//Modules 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule, RequestOptions } from '@angular/http'; 
import { AuthModule } from './auth/auth.module'; 

//Services 
import { AuthGuard } from './auth/auth.guard'; 
import { AuthService } from './auth/auth.service'; 
import { PropertiesService } from './services/properties.service'; 
import { TypesService } from './services/types.service'; 

import { TinyEditorComponent } from './tiny-editor/tiny-editor.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    BsDropdownModule.forRoot(), 
    TabsModule.forRoot(), 
    ChartsModule, 
    AuthModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule 
    ], 
    declarations: [ 
    AppComponent, 
    FullLayoutComponent, 
    SimpleLayoutComponent, 
    NAV_DROPDOWN_DIRECTIVES, 
    BreadcrumbsComponent, 
    SIDEBAR_TOGGLE_DIRECTIVES, 
    AsideToggleDirective, 
    TinyEditorComponent 
    ], 
    providers: [ 
    { 
    provide: LocationStrategy, 
    useClass: HashLocationStrategy 
    }, 
    AuthService, 
    AuthGuard, 
    PropertiesService, 
    TypesService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

ないビルダーの質問についてはよく分から、それは角度-cliのだろうか？ TinyMCEの構成で

Answer 1

ないのはなぜあなたはjQueryのを使用していることを確認

selector: `#${this.elementId}`, 

ELEMENTIDは、あなたがエディタにラップしたいHTML要素を参照し、@Inputパラメータとして指令に収容されています。ちょうど使用してみてください：

selector: '#' + this.elementId, 

それは

ngAfterViewInit() { 
    tinymce.init({ 
     selector: '#' + this.elementId, 
     skin_url: '../assets/skins/lightgray', 
     plugins: ['link', 'paste', 'table'], 
     setup: editor => { 
     this.editor = editor; 
     editor.on('keyup change',() => { 
      const content = editor.getContent(); 
      this.onEditorContentChange.emit(content); 
     }); 
     } 
    }); 
    } 

もしだろう、このまだない作品、

select: '#wysiwygEditor', 

そして、HTML、すなわち、デフォルトの選択の識別子を使用してみてください

<simple-tiny id="wysiwygEditor" (onEditorContentChange)="keyupHandler($event)"></simple-tiny> 

こんにちはps。乾杯。