Вызов пользовательских методов из пользовательской кнопки Froala - PullRequest
Новая
       9

Вызов пользовательских методов из пользовательской кнопки Froala

0 голосов
/ 27 февраля 2019

Я занимаюсь разработкой приложения 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();
          });
  }

Как вызвать пользовательские методы в том же классе из пользовательской кнопки?

1 Ответ

0 голосов
/ 27 февраля 2019

В вашем коде есть две проблемы.Первый, который очень распространен, это то, что 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();
      });
    }
  });
}
...