Electron + Angular2 ngIf/ngClass失败，直到用户在创建窗口后进行交互

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在构建一个带有Angular2和Electron的Web应用程序，并且在打开新窗口时出现问题，直到用户与用户交互电子窗口。Electron + Angular2 ngIf/ngClass失败，直到用户在创建窗口后进行交互

这是问题的解释：每一个我试图打开首先使用下面的代码，使得它开始为隐藏创建的窗口：

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>

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

我发现，如果我在应用程序中的任何地方模拟点击，一旦微调完成后可以解决问题，但是我有一些路径，用户可以用电子打开一个新窗口，而不想在这么多地方使用这种噱头解决方案。例如，这里是我用来执行此操作的代码：

this.elementRef.nativeElement.click()

什么可能导致此问题？如果有任何更多的代码或信息可以让我知道。

回答：

看来这个问题比我第一次想到的还要大，并且这是所有数据绑定的问题，在用户更改路由之前这些数据绑定并未完全解决。只需单击屏幕即可解决一些数据绑定问题，例如使用微调器的数据绑定问题，但使用双向绑定的其他变量仍然无效。

但是，这个问题的解决方案对我有效：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失败，直到用户在创建窗口后进行交互 的全部内容， 来源链接： utcz.com/qa/259619.html

回到顶部