Angular2：ng2-ckeditorでimgコマンドを上書きする

Question

ckeditorがあるページがあります。私はng2-ckeditorとngx-modalを使用します。 これは私のテンプレートです：

<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> 

私の状況はCKEditorバージョンの画像ダイアログを上書きしようとしています。私のコンポーネントでは、私はこれを行うでしょう：

import { 
    Component, OnInit, ViewChild, ViewChildren, AfterViewChecked, 
    AfterViewInit, Renderer, QueryList, ViewEncapsulation 
} from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 

import { Modal } from 'ngx-modal'; 
import { CKButtonDirective, CKEditorComponent } from 'ng2-ckeditor'; 

declare var CKEDITOR: any; 
@Component({ 
    selector: 'question-edit', 
    templateUrl: './question-edit.component.html', 
    styleUrls: [ 
    './question-edit.style.css' 
    ], 
    encapsulation: ViewEncapsulation.None 
}) 
export class EditQuestionComponent implements OnInit, AfterViewChecked, AfterViewInit { 
    @ViewChildren('answers') answerInputs: QueryList<any>; 
    @ViewChild('uploadModal') public uploadModal: Modal; 

    private editor: any; 
    constructor(private rd: Renderer) { } 

    ngOnInit() { 

    }; 

    registerCKEditorCommands(editor: any, uploadModal: Modal) { 
    let self = this; 
    editor.addCommand("image", { 
     exec: self.onUploadImage 
    }); 
    }; 

    ngAfterViewInit() { 
    let self = this; 
    setTimeout(function() { 
     for (var instanceName in CKEDITOR.instances) { 
     self.editor = CKEDITOR.instances[instanceName]; 
     self.editor.on("instanceReady", function (ev: any) { 
      let _editor = ev.editor; 
      self.registerCKEditorCommands(_editor, self.uploadModal); 
     }); 
     } 
    }); 
    }; 

    onUploadImage(editor: any) { 
    this.uploadModal.open(); 
    }; 
} 

私はckeditorツールバーの画像ボタンをクリックする以外はすべてうまく動作します。関数onUploadImage()が呼び出されますが、this.uploadModalはundefinedです。関数ngAfterViewInit()でthis.uploadModalを出力しようとすると正しい値が得られ、そこでダイアログを開くことができます。

私はどのようにしてダイアログを開くことができますか？onUploadImage？ ありがとうございます。

Answer 1

私はこのようコンテキストがコンポーネントのインスタンスに参照されるので、これらのオプションのいずれかがあなたのために働くべきだと思う：

1）バインド

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）矢印機能

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

3）インスタンスの矢印機能

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

はまたあなたの親切に返信用

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