Question

我尝试从某个功能调用服务，但我在控制台中收到此错误：

无法读取属性＆＃39; TestMethod＆＃39;未定义的

这是我的代码：

app.component.ts：

constructor(public _service: BackendFileCodeService){
}
public editor;

 EditorCreated(quill) {
     const toolbar = quill.getModule('toolbar');
     this.editor = quill;
      // console.log(quill)
      toolbar.addHandler('image', this.imageHandler);
}
imageHandler(value) {
          //   document.querySelector('input.ql-image[type=file]').addEventListener('click', () => {
          //      console.log('Hello');
          //   });
          const ImageInput = document.createElement('input');
          ImageInput.setAttribute('type', 'file');
          ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
          ImageInput.classList.add('ql-image');
          ImageInput.click();

          ImageInput.addEventListener('change', () => {
              const file = ImageInput.files[0];
              if (ImageInput.files != null && ImageInput.files[0] != null) {
                this._service.TestMethod('Hello');
                   }
          });
      }

BackendFileCodeService：

import { Injectable } from '@angular/core';
@Injectable()
export class BackendFileCodeService {
     constructor() { }
    TestMethod(test){
    return test;
    }
}

我试图在

中专门调用名为imageHandler的函数内的服务

ImageInput.addEventListener

但是我收到了提到的错误，我试图从imageHandler函数外部调用该服务，并且每个都按预期工作。

注意：该服务是控制台日志＆＃39;你好＆＃39;作为测试。

Answer 1

对imageHandler函数使用胖箭头语法应解决此问题。

imageHandler(value) {...}
...
imageHandler = (value) => { ... }

如果你不能使用胖箭头语法，你需要创建一个变量来捕获组件范围，最常见的方法是声明变量并分配给它，

self = this;
imageHandler(value) {
 ....
 self._service.TestMethod('Hello');
 ....
}

我发现你已经在下面使用了胖箭头语法了，这还不错，你还需要捕获imageHandler的范围。

ImageInput.addEventListener('change', () => {

详细了解function scopes in typescript here，

此和箭头功能

在JavaScript中，这是一个函数所设置的变量   调用。这使它成为一个非常强大和灵活的功能，但它   总是需要了解a的上下文   函数正在执行。这尤其令人困惑   返回函数或将函数作为参数传递时。

希望这会有所帮助!!

从函数angular2调用服务

1 个答案: