這指向主軸編輯器工具欄

Question

我在網站上將Quilljs用於文本區域。 標准編輯器不支持將圖像上傳到服務器，因此我必須實現一個自定義處理程序。 在文檔中寫道：

處理程序功能將綁定到工具欄（因此使用此功能將引用工具欄實例），並且如果相應格式無效，則傳遞輸入的value屬性，否則返回false。

這實際上對我來說是個問題，我不知道如何以干凈和“正確”的方式解決它。 我建立了一個有角度的應用程序，並為圖像上傳編寫了一個自定義處理程序。 此自定義圖像處理程序應在角度服務的幫助下將圖像上載到服務器。 數據服務在應用程序和我的組​​件的成員中全局提供，我可以使用this.dataService訪問它。 但是，單擊工具欄中的圖片上傳圖標后， this被綁定到工具欄，我不能再訪問我的數據服務。 我可以避免工具欄的邊界嗎？

在明確。 假設我用以下代碼創建了一個主軸編輯器：

this.editor = new Quill('#editor', {
      modules: { toolbar: "#toolbar"},
      placeholder: 'Some Placeholder',
      theme: 'snow'
});

現在我將自定義處理程序添加到圖像圖標

this.editor.getModule("toolbar").addHandler("image", imageHandler);

和我的處理函數例如：

imageHandler(event) {
  this.dataService.addImage(event.file);
}

它使用了我已經實現和測試的dataService。 但this.dataService不存在，因為this是現在綁定到工具欄。 我使用組件的構造函數初始化了服務。

constructor(private dataService: DataService) {

}

當我在構造函數中調用this.dataService時，可以找到它並且邊界很好，但是我需要在我的圖像處理函數中調用它以將文件發送到服務器。

最好的問候，斯文

Answer 1

解決此問題的最簡單方法是更改

this.editor.getModule("toolbar").addHandler("image", imageHandler);

進入

this.editor.getModule("toolbar").addHandler("image", imageHandler.bind(this));

現在，您可以在圖像處理程序函數中訪問組件變量/成員。 工具欄不再具有焦點。