从 Froala 自定义按钮调用自定义方法

Question

我正在开发一个 Angular 7 应用程序，在此应用程序中，我使用名为 Froala 的所见即所得编辑器库。

我已经在工具栏上添加了一个自定义按钮，现在我想在 class 用户单击此按钮（打开自定义模式）时调用一个方法。我使用下面的代码，但出现错误，提示找不到 openPictureModal 方法。

$.FroalaEditor.DefineIcon('imagePicker', {NAME: 'info'});
    $.FroalaEditor.RegisterCommand('imagePicker', {
      title: 'Image picker',
      focus: false,
      undo: false,
      refreshAfterCallback: false,
      callback: function (data) {
        this.openPictureModal();
      }
    });

我收到这个错误：

Uncaught TypeError: this.openPictureModal is not a function

这是我的模态方法：

openPictureModal() {
    const modalRef = this.modalService.open(PictureManageComponent, { size: 'lg' });
          modalRef.componentInstance.formFinished.subscribe(($event) => {
            modalRef.close();
          });
  }

如何从自定义按钮调用同一个 class 中的自定义方法？

Answer 1

您的代码中有两个问题。第一个很常见，是 this 在回调中丢失了。将回调定义为箭头函数应该可以解决这个问题。有关详细信息，请参阅 this question。

第二个问题比较微妙。作为 jQuery 事件处理程序的回调可能在 Angular 区域之外调用。因此，它不会触发更改检测。您可以将回调代码包装在 NgZone.run() 中以解决该问题。

生成的代码如下所示：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) { }

...

initializeFroala() {
  $.FroalaEditor.DefineIcon('imagePicker', {NAME: 'info'});
  $.FroalaEditor.RegisterCommand('imagePicker', {
    title: 'Image picker',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: (data) => {            // Define the callback as arrow function
      this.ngZone.run(() => {        // Run the callback code in Angular zone
        this.openPictureModal();
      });
    }
  });
}

从 Froala 自定义按钮调用自定义方法

Call custom methods from a Froala custom button

froala

angular