Модальное окно в Angular 6, открытое плагином jQuery, закрывается только после двух кликов
У меня есть JSTree (плагин jQuery), встроенный в мое приложение Angular. Плагин JSTree предоставляет контекстное меню для элементов дерева, которое я затем использую для вызова функций моего класса компонента Angular (например, нажатие «Предварительный просмотр документа» в контекстном меню вызывает функцию previewDocument (x) класса компонента).
Вот код, который я использую для этого:
$(this.dataTree.nativeElement).jstree({
contextmenu: {
items: {
preview: {
action: (node: any) => {
this.previewDocument(node.data.id);
}
}
}
},
..........
});
Функция предварительного просмотра документа вызывает службу уведомлений, которая открывает MatDialog для отображения запрошенного документа.
Теперь проблема: когда я нажимаю кнопку закрытия модального окна, ничего не происходит. Но когда после этого я нажимаю за пределами модального окна, оно закрывается. То же самое, сначала щелкнув за пределами модального окна, после этого мне нужно щелкнуть где-нибудь внутри модального окна, чтобы окончательно закрыть его.
Кажется, здесь что-то не так с обновлением DOM, потому что, если я обычно вызываю эту модальную функцию открытия (не через плагин jQuery), все работает нормально.
Как принудительно обновить DOM после закрытия модального окна?
PS: я использую MatDialogRef.close(); чтобы закрыть модальное окно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку команда вызывается из плагина jQuery, она, вероятно, выполняется за пределами Angular зона и, следовательно, не вызывает обнаружение изменений. Вы можете заставить код выполняться в зоне Angular, заключив его в обратный вызов 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, открывая диалоговое окно вне зоны Angular. Другая команда открывает диалоговое окно в зоне, чтобы вы могли увидеть другое поведение.
@Max - У вас была возможность попробовать это решение?
Извините за поздний ответ, сработало как шарм! Спасибо :)
Вот почему вы не устанавливаете jQuery в приложение Angular, иначе вас выкинут из моей команды.