Событие, инициированное редактором tinymce, не обновляет Angular Component сразу

Question

Я пытаюсь построить угловое приложение вокруг экземпляра wordpress tinyMce. Внутри редактора есть нередактируемые элементы, которые при нажатии открывают модальное окно вне редактора tinymce.

Однако при нажатии на элемент модальное окно не открывается, пока пользователь не переместит мышь за пределы iframe, расположенного внутри редактора.

У меня есть служба, которая занимается настройкой редактора tinymce. Служба регистрирует обработчик события щелчка, который при щелчке генерирует событие через объект субъекта.

Мой модальный класс подписывается на тему, что приведет к открытию модального режима при каждом нажатии элемента.

Служба обработчика редактора

private clickSubject: Subject<HTMLElement>;
public clickEvent:Observable<HTMLElement>;

private editorSetup(editor: TinyMceEditor) {
    editor.on("DblClick", e => {
        let elm = e.target as HTMLElement;
        this.clickSubject.next(elm);
    });
}

Модальный компонент

private open(elm:HTMLElement){
    this.isOpen = true;
    console.log("Opening");
}
ngOnInit() {
    this.editorHandler.clickEvent.subscribe(elm =>this.open(elm));
}

Я создал приложение StackBlitz , чтобы помочь продемонстрировать мою проблему.

Ожидаемое: Щелчок по элементу, расположенному в редакторе, откроет модал без задержки.

Фактический: Когда я щелкаю элемент, происходит событие click в редакторе, и сообщение «Открытие» также регистрируется на консоли. Однако модальный режим не отображается, пока пользователь не переместит мышь за пределы iframe, расположенного внутри редактора.

Answer 1

Наиболее вероятной причиной в таких случаях является то, что ваш код выполняется в корневой зоне, но должен выполняться в угловой зоне.

Вы можете исправить это, используя NgZone.run метод:

@Component({
  selector: 'app-tiny-editor',
  templateUrl: './tiny-editor.component.html'
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  ...

  constructor(private zone: NgZone, ...) { }

  ngAfterViewInit() {
    tinymce.init({
      ...
      setup: editor => {
        this.editor = editor;
        editor.on('dblclick', (e) => {
          let elm = e.target;
          console.log("clicked!");

          this.zone.run(() => {   <============================== make sure we're in ng zone
            this.editorHandler.editorSubject.next(elm);
          });

        });
      }
    });
  }
}

Разветвленный стек-блиц