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）结合

一）

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