Angular 2's two-way binding not working on initial load of electron app

问题

I have the following files:

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

In the code, I am retrieving versioning info about the environment that I am running on and updating the version property and hoping that it updates in my view. The called to getVersionInfo() is async and uses the ipcMain and ipcRenderer communication constructs in electron. I am able to verify that these are working as expected. There are no errors from neither angular nor electron.

I have verified that the version is indeed coming back in the arg param and being logged to the console as expected; however, it is not showing up in the view until I navigate around my app. This leads me to believe it has something to do with the component lifecycle and change detection in Angular 2. However, I am a bit of a newbie to both Angular 2 and Electron.

Any pointers or ideas as to what might be going on and how to fix it?

回答1:

Havent used electron.. But try ngZone.

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

And in your constructor,

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 maybe updating the value outside the 'zone' and angular may not be able to detect it.

来源：https://stackoverflow.com/questions/42743990/angular-2s-two-way-binding-not-working-on-initial-load-of-electron-app