[英]Calling service from a function angular2
我正在嘗試從函數調用服務,但在控制台中出現此錯誤:
無法讀取未定義的屬性“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'); } }); }
后端文件代碼服務:
import { Injectable } from '@angular/core'; @Injectable() export class BackendFileCodeService { constructor() { } TestMethod(test){ return test; } }
我正在嘗試在名為 imageHandler 的函數內調用服務,特別是在
ImageInput.addEventListener
但是我提到了錯誤,我嘗試從 imageHandler 函數外部調用該服務,並且每個都按預期工作。
注意:該服務是控制台日志“hello”作為測試。
對 imageHandler 函數使用粗箭頭語法應該可以解決這個問題。
imageHandler(value) {...}
...
imageHandler = (value) => { ... }
如果不能使用粗箭頭語法,則需要創建一個變量來捕獲組件范圍,最常見的方法是聲明一個變量並分配給它,
self = this;
imageHandler(value) {
....
self._service.TestMethod('Hello');
....
}
我看到您已經在使用下面的粗箭頭語法,這很好,否則您還需要捕獲imageHandler
范圍。
ImageInput.addEventListener('change', () => {
在此處閱讀有關打字稿中函數作用域的更多信息,
this和箭頭函數
在 JavaScript 中,這是一個在調用函數時設置的變量。 這使它成為一個非常強大和靈活的特性,但它的代價是始終必須知道函數正在執行的上下文。這是眾所周知的混亂,尤其是在返回函數或將函數作為參數傳遞時。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.