这是指向鹅毛笔编辑器工具栏

I use Quilljs https://quilljs.com/我网站上的文本区域。标准编辑器不支持将图像上传到服务器，因此我必须实现自定义处理程序。文档中写着下列： https://quilljs.com/docs/modules/toolbar/#handlers

处理函数将绑定到工具栏（因此使用它会 参考工具栏实例）并传递了 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在构造函数中，然后可以找到它并且边界很好，但我需要在图像处理函数中调用它以将文件发送到服务器。

此致， 斯文

解决这个问题最简单的方法就是改变

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

into

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

现在您可以在图像处理函数中访问组件变量/成员。工具栏不再是焦点。