javascript - 无法访问 Angular 2 组件中 addEventListener() 中的 'this' 上下文

Question

无法在 Angular 2 中访问 addEventListener() 内的“this”上下文

在我的富文本编辑器组件中，我正在实现图像上传功能。 为此，我在图像输入标记中为“更改”编写了一个 addEventListener 事件处理程序，我需要通过“this”访问事件监听器内的应用程序服务。

    Imageinput.addEventListener('change', () => {
                const file = Imageinput.files[0];
                var a = this;           

                if (Imageinput.files != null && Imageinput.files[0] != null) {
                    debugger;     
                    this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
                        debugger;
                        this._returnedURL = res.imageUrl;
                        this.pushImageToEditor();
                    });               
                }
            }
            );

但是 this._imageUploadService 每次都返回 undefined，即使控制台没有任何错误。

<小时/>

Here is my complete component.ts code -
    export class CreateArticleComponent extends AppComponentBase {

        @ViewChild("fileInput") fileInput;

        public editor;
        public _returnedURL = "";    

        constructor(
            injector: Injector,
            private _imageUploadService: ArticleServiceProxy,
        ) {
            super(injector);
        }

        onEditorBlured(quill) {
            console.log('editor blur!', quill);
        }

        onEditorFocused(quill) {
            console.log('editor focus!', quill);
        }

        onEditorCreated(quill) {
            console.log(quill);
            let toolbar = quill.getModule('toolbar');
            toolbar.addHandler('image', this.imageHandler);        

            //this.editorContent = quill;
            this.editor = quill;
            console.log('quill is ready! this is current quill instance object', quill);
        }

        imageHandler() {           
            debugger;
            let self = this;

            const Imageinput = document.createElement('input');
            Imageinput.setAttribute('type', 'file');
            //Imageinput.setAttribute('name', 'articleImage');
            Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
            Imageinput.classList.add('ql-image');


            Imageinput.addEventListener('change', () => {
                const file = Imageinput.files[0];

                if (Imageinput.files != null && Imageinput.files[0] != null) {
                    debugger;
this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
                        debugger;
                        this._returnedURL = res.imageUrl;
                        this.pushImageToEditor();
                    });                   
                }
            }
            );

            Imageinput.click();
        }

        SendFileToServer(file: any) {
            debugger;
            this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
                debugger;
                this._returnedURL = res.imageUrl;
                this.pushImageToEditor();
            });
        }

        pushImageToEditor() {
            debugger;
            const range = this.editor.getSelection(true);
            const index = range.index + range.length;
            this.editor.insertEmbed(range.index, 'image', this._returnedURL);
        }

        ngAfterViewInit() {           
        }
    }    

<小时/>

Here is my editor HTML -

  <quill-editor #fileInput                                  
            [(ngModel)]="editorContent"
            [ngModelOptions]="{standalone: true}"
            (onEditorCreated)="onEditorCreated($event)"
            (onContentChanged)="onContentChanged($event)"
            (onSelectionChanged)="logSelection($event)"
            [style]="{'height':'300px'}">
</quill-editor>

我可以在其他方法中访问 this._imageUploadService 但无法在 addEventListener() 中访问它。任何帮助将不胜感激

Answer 1

在更改事件处理程序中 this 引用 toolbar.addHandler 的上下文，因此您需要它像这样绑定(bind) this.imageHandler

  onEditorCreated(quill) {
        console.log(quill);
        let toolbar = quill.getModule('toolbar');
        toolbar.addHandler('image', this.imageHandler.bind(this));  // <--      

        //this.editorContent = quill;
        this.editor = quill;
        console.log('quill is ready! this is current quill instance object', quill);
    }