呼叫服務

我試圖從一個函數調用一個服務，但我在控制檯收到此錯誤：呼叫服務

無法讀取的未定義的屬性「TestMethod的」

這是我的代碼：

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

但我在提到錯誤時，我試圖從imageH外部調用服務安德勒功能和每一個這樣的預期工作。

注意：該服務是控制檯日誌「hello」作爲測試。

來源

2017-09-23 Fares Ayyad

對你的imageHandler函數使用胖箭頭語法應該可以解決這個問題。

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

如果您不能使用胖箭頭語法，你需要創建一個變量來捕獲組件範圍，最常見的方式是聲明變量並分配到這一點，

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

我看到你已經在使用下面的胖箭頭語法，這很好，否則你還需要捕獲imageHandler的範圍。

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

瞭解更多關於function scopes in typescript here，

這和箭頭功能

在JavaScript中，這是當一個函數是稱那我們設置一個變量。這使得它成爲一個非常強大和靈活的功能，但它的代價是始終必須知道函數正在執行的上下文。這是非常令人困惑的，尤其是在返回函數或傳遞函數時出現的論據。

希望這有助於！

來源

2017-09-26 19:42:31

回答

相關問題