使用es5而不是es6箭頭功能調用angular2服務

Question

我正在嘗試使用es5在angular2服務中調用方法，這是我的實現：

構造函數和調用服務的方法：

 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 Arrows而是this綁定到直接封閉的詞法作用域：

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

資源

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