从 Electron 接收 ipcRenderer.on 后,Angular 2 视图未更新

Posted

技术标签:

【中文标题】从 Electron 接收 ipcRenderer.on 后,Angular 2 视图未更新【英文标题】:Angular 2 view not updating after receiving ipcRenderer.on from Electron 【发布时间】:2017-10-03 03:15:38 【问题描述】:

我正在使用 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);
  
 

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

亲切的问候,

Tyvo

【问题讨论】:

你试过contructor(private ref ChangeDetectorRef)然后在回调ref.detectChanges() 【参考方案1】:

对于这种情况,请使用NgZone

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

现在,在NgZone 提供的.run() 函数中更新您的应用

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')
  );
);

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

【讨论】:

以上是关于从 Electron 接收 ipcRenderer.on 后,Angular 2 视图未更新的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 ipcMain 没有发送到 Electron 中的 ipcRenderer?

如何导入ipcRenderer做出反应?

preload.ts 中的 contextBridge.exposeInMainWorld:ipcRenderer 接收到来自 main.ts 的消息但渲染器没有得到它

ipcRenderer 发送与 sendSync

require 没有在带有 ipcRenderer.on 的 Electron-React-Webpack-Typescript 应用程序中定义

如何在反应中导入 ipcRenderer?