Electron + Angular2 ngIf/ngClass 在创建 window 时直到用户交互之后才会失败

Question

我正在使用 Angular2 和 Electron 构建一个 Web 应用程序，但在打开新的 windows 时遇到问题，在用户与 electron [=38] 交互之前，条件 html 元素不会显示=].

这是对问题的解释：我尝试打开的每个 windows 首先是使用以下代码创建的，因此它以隐藏的形式开始：

win = new BrowserWindow({width: 1556, height: 882,
    icon: path.join(__dirname, 'assets/app_icon_1024.png'),
    show: false
  });

然后当 window 完成加载时，我使用 Angular2 路由器将其更改为指定路由，并在执行此调用后 win.show()。对于我尝试打开的大多数 windows，window 有一个简短的加载微调器，它会在 Web 应用程序等待我的后端对某种数据库查询做出响应时显示。收到响应后，它会更改与 ngClass 或 ngIf 一起用于阻塞屏幕并显示微调器的元素的布尔值，以便可以显示返回的结果。这是微调器的示例：

<pc-loading-spinner [ngClass]="{'hideLoadingSpinner': !loadingContacts}"></pc-loading-spinner>

每当我运行互联网浏览器上的网络应用程序并使用 link/the url 更改路由时，一切都正常运行，当返回响应时微调器消失。但是，每当我在电子中打开 window 时，即使在返回响应之后，我也可以使用调试器看到布尔值已更改， ngIf 和 hideLoadingSpinner class 与上述情况一样添加。但是，如果我在加载完成后单击屏幕或调整 window 的大小，微调器将立即被删除 （但只有在加载完成后单击屏幕时它才有效）。另一方面，如果我单击一个按钮以使用电子触发带有微调器的路由而不打开新的 window，则一切正常并且微调器被删除。

我发现，如果我在微调器完成后在我的应用程序中的任何地方模拟点击，这就解决了这个问题，但是我有很多路线，用户可以在其中打开一个新的 window 电子并且宁愿不必在这么多地方使用这种花哨的解决方案。例如，这是我用来执行此操作的代码：

this.elementRef.nativeElement.click()

是什么导致了这个问题？如果我可以提供更多代码或信息，请告诉我。

Answer 1

问题似乎比我最初想象的要严重，而且这是所有数据绑定的问题，直到用户更改路由后才能完全解决。只需单击屏幕即可解决一些数据绑定问题，例如微调器的问题，但其他具有双向绑定的变量仍然无法正常工作。

但是这个问题的解决方案对我有用：。如果我将在 window 创建后立即发生的路由更改放在对 NgZone 的运行调用中，则可以避免该问题：

this._ngzone.run(()=>{
     this.router.navigate([args]);
  });

Electron + Angular2 ngIf/ngClass 在创建 window 时直到用户交互之后才会失败

Electron + Angular2 ngIf/ngClass fails until after user interaction when creating window

electron

angular2-routing

angular