Angular2: überschreiben img Befehl in ng2-ckeditor

Question

Ich habe eine Seite, die Ckeditor drin haben. Ich benutze ng2-ckeditor und ngx-modal. Dies ist meine Vorlage:

<div> 
    <ckeditor 
     id="questionContent" 
     name="questionContent" 
     [(ngModel)]="question.content" 
     (change)="onChange($event)" 
     (ready)="onReady($event)" 
     (focus)="onFocus($event)" 
     (blur)="onBlur($event)" debounce="500"> 
    </ckeditor> 
</div> 
....//Some stuff there 
<!--Modal--> 
<modal #uploadModal [closeOnEscape]="false" [closeOnOutsideClick]="false"> 
    <modal-header> 
     <h4 class="modal-title pull-left">{{ 'QUESTIONS' | translate }}</h4> 
    </modal-header> 
    <modal-content> 
     <div class="drag-n-drop-container" 
      ngFileDrop 
      [options]="options" 
      (onUpload)="handleUpload($event)" 
      [ngClass]="{'file-over': hasBaseDropZoneOver}" 
      (onFileOver)="fileOverBase($event)"> 
     <h1>Drag & Drop</h1> 
     <label class="upload-button"> 
      <input type="file" 
       class="hidden" 
       ngFileSelect 
       [options]="options" 
       (onUpload)="handleUpload($event)"> 
      Browse 
     </label> 
     </div> 
    </modal-content> 
    <modal-footer> 
     <button class="btn btn-default pull-right cancel" (click)="uploadModal.close()"> 
      <i class="fa fa-times"></i> 
      {{ 'BUTTON_CLOSE' | translate }}</button> 
    </modal-footer> 
</modal> 

Meine Situation ist versuchen, Bild-Dialog ckeditor zu überschreiben. Also in meiner Komponente werde ich das tun:

Alle funktionieren gut, außer wenn ich Bildschaltfläche in ckeditor Symbolleiste klicken. Es wird die Funktion onUploadImage() aufgerufen, aber this.uploadModal ist undefined. Wenn wir versuchen, this.uploadModal in Funktion ngAfterViewInit() auszudrucken, gibt es korrekten Wert und wir können dort Dialog öffnen.

Wie kann ich öffnen Dialog in Funktion onUploadImage? Vielen Dank im Voraus.

Answer 1

Ich denke, eine dieser Optionen sollte für Sie arbeiten, weil auf diese Weise Kontext wird auf Ihre Komponenteninstanz verwiesen werden:

1) binden

a)

editor.addCommand("image", { 
    exec: this.onUploadImage.bind(this) 
}); 

b)

export class EditQuestionComponent { 
    constructor() { 
    this.onUploadImage = this.onUploadImage.bind(this); 
    } 
    ... 
    editor.addCommand("image", { 
    exec: this.onUploadImage 
    }); 

2) Pfeilfunktion

editor.addCommand("image", { 
    exec: (editor) => this.onUploadImage(editor) 
}); 

3) Beispiel Pfeil Funktion

editor.addCommand("image", { 
    exec: this.onUploadImage 
}); 
... 
onUploadImage = (editor: any) => { 
    this.uploadModal.open(); 
}; 

Siehe auch

• https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript