Angular 2的双向绑定不适用于电子app的初始加载

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>
...

在代码中,我正在检索有关我正在运行的环境的版本信息,并更新版本属性并希望它在我的视图中更新.调用getVersionInfo()是异步的,并在电子中使用ipcMain和ipcRenderer通信结构.我能够验证这些是否按预期工作.角度和电子都没有误差.

我已经验证了该版本确实在arg param中返回并按预期登录到控制台; 但是,在我浏览我的应用程序之前,它不会显示在视图中.这让我相信它与Angular 2中的组件生命周期和变化检测有关.但是,我对Angular 2和Electron都是一个新手.

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

Answer 1

没有使用电子..但尝试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;
      });
    });
  }

电子可能会更新"区域"之外的值,而角度可能无法检测到它.