Question

我正在尝试使用es5调用angular2服务中的方法，这是我的实现：

构造函数＆amp;调用服务的方法：

 theService;

  constructor(_service: SendFileService) {
    this.theService = _service;
  }

将调用服务的方法：

imageHandler(value) {
  const service = SendFileService;
  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', function()  {
    const file = ImageInput.files[0];
    if (ImageInput.files != null && ImageInput.files[0] != null) {
    this.theService.SendFileService(file)
      .subscribe(function(res){console.log(res); });
    }
}.bind(this));
}

这是服务：

  private _url = '/api/uploadImage';

  constructor(private http: Http) {     }

       sendFileToServer(file) {

          const input = new FormData();
          input.append('file', file);
    return  this.http.post(this._url, input).map(resp => resp.json()).catch(err => Observable.throw(err));

      }

当我试图运行该程序时，它给了我：

this.theService.SendFileService不是函数

但是当我尝试使用es6的胖箭时，它完美无缺：

imageHandler(value) {
  const service = SendFileService;
  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.sendFileToServer(file)
      .subscribe(resp => {this._returnedURL = resp; this.pushImageToEditor(); });
    }
});

}

Answer 1

ES6中的代码可以运行，因为

胖箭改变了this的处理方式。之前......在ES5中，bind()或var that = this;是必需的，因为函数会创建自己的this。我们需要存储父this 在可以在回调中引用或处理的变量中约束自己。

function CounterES5() {
  this.seconds = 0;
  window.setInterval(function() {
    this.seconds++;
  }.bind(this), 1000); // or }.bind(this), 1000) and skip that = this
}

var counterA = new CounterES5();
window.setTimeout(function() {
  ChromeSamples.log(counterA.seconds);
}, 1200);

...后 ES6箭头反而将this绑定到直接封闭词汇范围：

function CounterES6() {
  this.seconds = 0;
  window.setInterval(() => this.seconds++, 1000);
}

Source

Answer 2

试试这个

imageHandler(value) {
    const service = SendFileService;
    const ImageInput = document.createElement('input');

    const theService = this.theService;

    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', function () {
        const file = ImageInput.files[0];
        if (ImageInput.files != null && ImageInput.files[0] != null) {
            theService.SendFileService(file)
                .subscribe(function (res) { console.log(res); });
        }
    }.bind(this));
}

使用es5调用angular2服务而不是使用es6箭头功能

2 个答案: