Angular 2 的双向绑定(bind)不适用于 Electron 应用程序的初始加载

Question

我有以下文件:

topnav.component.ts

import { Component } from '@angular/core';
import { EnvironmentService } from '../services/ipc/environment.service';

const { ipcRenderer } = electron;

@Component({
  selector: 'app-topnav',
  templateUrl: './topnav.component.html',
  styleUrls: ['./topnav.component.scss']
})
export class TopnavComponent {
  version: string = null;

  constructor(private environmentService: EnvironmentService) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply', (event, arg) => {
      console.log(arg);
      this.version = arg;
    });
  }
}

topnav.component.html

...
    <div *ngIf="version">{{version}}</div>
...

在代码中，我正在检索有关我正在运行的环境的版本控制信息并更新版本属性，并希望它在我的 View 中更新。对 getVersionInfo() 的调用是异步的，并使用 electron 中的 ipcMain 和 ipcRenderer 通信结构。我能够验证这些是否按预期工作。 Angular 和 Electron 都没有误差。

我已验证该版本确实在 arg 参数中返回并按预期记录到控制台；但是，在我浏览我的应用程序之前，它不会显示在 View 中。这让我相信它与 Angular 2 中的组件生命周期和变更检测有关。但是，我对 Angular 2 和 Electron 都是新手。

关于可能发生的事情以及如何解决它的任何指示或想法？

Answer 1

没用过electron..但是试试ngZone .

import { Component,NgZone } from '@angular/core';

在你的构造函数中，

constructor(private environmentService: EnvironmentService,private _ngzone:NgZone) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply', (event, arg) => {
      console.log(arg);
      this._ngzone.run(()=>{
         this.version = arg;
      });
    });
  }

Electron 可能会更新“区域”之外的值，而 Angular 可能无法检测到它。