Angular 2的双向绑定不适用于电子应用程序的初始负载 [英] Angular 2's two-way binding not working on initial load of electron app

问题描述

我有以下文件:

topnav.component.ts

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

topnav.component.html

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

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

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.

我已验证该版本确实已返回arg参数，并已按预期记录到控制台；但是，直到我在应用程序中导航时，它才会显示在视图中.这使我相信它与Angular 2中的组件生命周期和变更检测有关.但是，我对Angular 2和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?

推荐答案

Havent用过电子.但是尝试

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

这篇关于Angular 2的双向绑定不适用于电子应用程序的初始负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！