Модал в Angular 6, открытый плагином jQuery, закрывается только после двух кликов

Question

У меня есть JSTree (плагин jQuery), встроенный в мое угловое приложение. Плагин JSTree предоставляет контекстное меню для элементов дерева, которое я затем использую для вызова функций моего класса компонента Angular (например, нажатие «Preview Document» в контекстном меню вызывает функцию previewDocument (x) класса компонента).

Вот код, который я использую для этого:

$(this.dataTree.nativeElement).jstree({
  contextmenu: {
    items: {
      preview: {
        action: (node: any) => {
          this.previewDocument(node.data.id);
        }
      }
    }
  },
  ..........
});

Функция предварительного просмотра документа вызывает службу уведомлений, которая открывает MatDialog для отображения запрошенного документа.

Теперь проблема: когда я нажимаю кнопку закрытия модала, ничего не происходит. Но когда я нажимаю за пределами модального режима, он закрывается. То же самое с первым щелчком вне модального окна, после чего нужно щелкнуть где-нибудь внутри модального окна, чтобы окончательно закрыть его.

Кажется, что-то не так с обновлением DOM, потому что, если я вызываю эту модальную функцию открытия нормально (не через плагин jQuery), все работает просто отлично.

Как заставить принудительно обновить DOM после закрытия модального окна?

PS: я использую MatDialogRef.close (); закрыть модал.

Answer 1

Поскольку команда вызывается из плагина jQuery, она, вероятно, работает за пределами угловой зоны и, следовательно, не вызывает обнаружение изменений.Вы можете принудительно запустить код в угловой зоне, заключив его в обратный вызов NgZone.run():

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

constructor(private ngZone: NgZone) { }

$(this.dataTree.nativeElement).jstree({
  contextmenu: {
    items: {
      preview: {
        action: (node: any) => {
          this.ngZone.run(() => {                // <-- Runs the code in Angular zone
            this.previewDocument(node.data.id);
          }); 
        }
      }
    }
  },
  ..........
});

Этот стек * блиц имитирует проблему jQuery, открыв диалоговое окно снаружиугловой зоны.Другая команда открывает диалоговое окно в зоне, чтобы вы могли увидеть другое поведение.