Question

我正在使用Angular2和Electron构建一个Web应用程序，并且在打开新窗口时遇到问题，在用户与电子窗口交互之前，不会显示条件html元素。

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

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

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

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

每当我在互联网浏览器上运行网络应用程序并使用链接/网址更改路由时，一切都会正常运行，并且在返回响应时，微调器会消失。但是，每当我用电子打开窗口时，即使在返回响应之后我也可以看到使用调试器更改了布尔值， ngIf既不会起作用也不会添加hideLoadingSpinner类如上述情况。但是，如果我在加载完成后单击屏幕或调整窗口大小，则会立即移除微调器（只有在加载完成后单击屏幕时才能正常工作）。另一方面，如果我点击一个按钮来触发使用电子旋转器的路线而不打开一个新窗口，一切正常，旋转器被移除。

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

this.elementRef.nativeElement.click()

可能导致此问题的原因是什么？如果我能提供更多的代码或信息，请告诉我。

Answer 1

看起来这个问题比我初想的要大，并且这是一个问题，所有数据绑定都没有完全解决，直到用户更改路由。只需单击屏幕即可解决一些数据绑定问题，例如带有微调器的数据绑定问题，但其他具有双向绑定的变量仍然无法正常工作。

然而，这个问题的解决方案对我有用：Angular 2's two-way binding not working on initial load of electron app。如果我在对NgZone的运行调用中创建窗口后立即发生路由更改，则可以避免出现问题：

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

Electron + Angular2 ngIf / ngClass在创建窗口

1 个答案: