代码之家 › 专栏 › 技术社区 › Amit Sawant

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

quill image-upload angular2-services angular javascript

Amit Sawant · 技术社区 · 6 年前

无法访问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();
                    });               
                }
            }
            );

但是这个_imageUploadService每次都返回未定义的,即使控制台没有任何错误。

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()中访问它。任何帮助都将不胜感激

2 回复 | 直到 6 年前

El houcine bougarfaoui 6 年前

更改中的事件处理程序 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);
    }

Daniel Netzer 6 年前

而不是使用。绑定或尝试将对象/上下文强制到回调中您只需使用angular Renderer2包装器,即可访问组件类上下文。

    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();
  }