2017-07-15 8 views
1

Angular2とElectronを使用してWebアプリケーションを構築していて、ユーザーが相互作用するまで条件付きhtml要素が表示されない新しいウィンドウを開くときに問題があります。電子窓。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アプリケーションを実行すると、私はリンク/ URLを使用してルートを変更するたびに、すべてが正常に動作し、応答が返されたときスピナーが消えます。しかし、私が電子メールでウィンドウを開くときはいつでも、応答が返された後でもブール値が変更されたことをデバッガを使って見ることができます。ngIfもうまく動作せず、上記のようにhideLoadingSpinnerクラスも追加されません。ただし、読み込みが完了した後で画面をクリックしたり、ウィンドウのサイズを変更したりすると、スピナーはすぐに削除されます(読み込みが完了した後で画面をクリックすると動作します)。一方、新しいウィンドウを開くことなく電子を使ってスピナーでルートをトリガーするボタンをクリックすると、すべて正常に動作し、スピナーは削除されます。

私は、スピナーがこの問題を解決した後、私のアプリのどこかでクリックをシミュレートすると、ユーザーが電子で新しいウィンドウを開くことができ、むしろ非常に多くの場所でそのようなギミックなソリューションを使用する。

この問題を引き起こしている可能性が何
this.elementRef.nativeElement.click() 

:たとえば、ここに私はこれを行うために使用するコードはありますか?それ以上のコードや情報があれば教えてください。

答えて

0

問題は私が最初に思ったよりも大きく、ユーザーがルートを変更するまで完全に解決されないすべてのデータバインディングに問題があるようです。画面をクリックするだけで、スピナーのようなデータバインディングの問題は解決されますが、双方向バインディングの他の変数はまだ機能しません。

しかし、この質問の解決策は私のために働いた:Angular 2's two-way binding not working on initial load of electron app。 NgZoneの実行呼び出しでウィンドウを作成した直後に発生するルート変更を配置すると、問題は回避されます。

this._ngzone.run(()=>{ 
    this.router.navigate([args]); 
    }); 
関連する問題