从Electron收到ipcRenderer.on后,Angular 2视图没有更新

时间:2017-05-04 19:34:17

标签: angular ipc settimeout electron

我正在使用ipcRenderer从main.js中的浏览器对话框中检索文件夹路径。

但由于某些原因,它不会更新我的视图中的文本字符串。

我知道为了使这个工作,我需要做一个setTimeout来更新它(感谢谷歌!)。但由于某些原因,这不起作用。

我使用的代码如下。

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

declare var electron: any;

@Component({
  selector: 'my-app',
  template: 
  //added (click)="debug()" in order to update the {{path}} manually
  `<h1 (click)="debug()">My First Angular 2 App with Electron</h1> 
  <br />Project Path: {{[(path)]}} 
  <button (click)="btnClick()">Select project path</button>
  <br /> <br />`
})
export class AppComponent implements OnInit {
  ipc:any;
  path:string;

  constructor(){
    this.path = __dirname;

  }

  ngOnInit(){
    electron.ipcRenderer.on('project-path-reply', (event, arg) => {
      setTimeout(() => {
        this.path = arg.return[0];
        console.log('updated')
      })
    })
  }

  btnClick(){
    electron.ipcRenderer.send('project-path',1);
  }
  debug(){
    console.log(this.path);
  }
 }

有人能指出我正确的方向这是我第一个使用电子的应用程序。

亲切的问候,

Thyvo

1 个答案:

答案 0 :(得分:2)

对于这种情况,使用 NgZone

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

现在,在 .run()

提供的 NgZone 函数内更新您的应用
constructor(zone:NgZone) {

ipcRenderer.on('project-path-reply', (event, arg) => {
  this.zone.run(()=>{
     // the code that requires change detection here, just like below //
     this.path = arg.return[0];
     console.log('updated')
  });
});

}

这很可能是因为电子正在更新角度变化检测区域之外的值。