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

Question

无法在 angular 2

中访问 addEventListener() 内的 'this' 上下文

在我的富文本编辑器组件中，我实现了图片上传功能。为此，我在图像输入标签中为 'change' 编写了一个 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 returns每次都未定义，即使控制台没有任何错误。

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 的上下文，因此您需要它像这样绑定 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);
    }

Answer 2

无需使用 .bind 或尝试强制 objects/context 进入回调，您只需使用 angular Renderer2 包装器即可访问组件 class 上下文。

    imageHandler() {
    debugger;

    const Imageinput = this.renderer.createElement('input');
    this.renderer.setAttribute(Imageinput, 'type', 'file');
    this.renderer.setAttribute(Imageinput, 'accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    this.renderer.addClass(Imageinput, 'ql-image');

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

    Imageinput.click();
  }

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

Unable to access 'this' context in addEventListener() in Angular 2 component

javascript

image-upload

quill

angular2-services

angular