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

Question

我正在开发一个Angular 7应用程序，在此应用中，我正在使用Wysiwyg编辑器库，称为FROALA。

我已经在工具栏上添加了一个自定义按钮，现在我想在同一类中调用用户单击此按钮（打开自定义模式）的方法。我使用下面的代码，但我会发现一个错误，说它找不到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();
          });
  }

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

Answer 1

您的代码中有两个问题。第一个非常常见的是this在回调内丢失。将回调定义为箭头功能应解决该问题。有关更多详细信息，请参见此问题。

第二个问题更加微妙。作为jQuery活动处理程序的回调可能被称为在角区外。结果，它不会触发变化检测。您可以将回调代码包装在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();
      });
    }
  });
}