Angular 6 中的模式由 jQuery 打开插件仅在单击两次后关闭

Question

我的 Angular 应用程序中嵌入了一个 JSTree（jQuery 插件）。 JSTree 插件为树元素提供了一个上下文菜单，然后我用它来调用我的 Angular 组件 class 的函数（例如，单击上下文菜单中的 "Preview Document" 调用函数 previewDocument(x)组件 class）。

这是我为此使用的代码：

$(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 插件调用的，它可能运行在 Angular zone 之外，因此不会触发更改检测。您可以通过将代码包装在 NgZone.run() 回调中来强制代码在 Angular 区域内运行：

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);
          }); 
        }
      }
    }
  },
  ..........
});

This stackblitz 通过在 Angular 区域外打开一个对话框来模拟 jQuery 问题。另一个命令在区域中打开对话框，以便您可以看到不同的行为。

Angular 6 中的模式由 jQuery 打开插件仅在单击两次后关闭

Modal in Angular 6 opened by jQuery Plugin only closes after two clicks

javascript

jquery

angular

jstree