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

Question

我的 Angular 应用程序中嵌入了一个 JSTree（jQuery 插件）。 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();关闭模式。

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 问题。另一个命令在区域中打开对话框，以便您看到不同的行为。