Electron-Angular 在 ipc 事件上打开客户端对话框答案

【问题标题】：Electron-Angular open client-side dialog on ipc eventElectron-Angular 在 ipc 事件上打开客户端对话框
【发布时间】：2021-02-14 03:28:43
【问题描述】：

我有一个弹出客户端角度材质对话框组件的后端通知。有时，但并非总是如此，对话框不会完全实例化。组件的构造函数被调用，但生命周期中的任何其他内容都不会被调用，直到对话框关闭。有时它工作得很好，ngOnInit 也会被调用。

有ipc订阅的组件是这样的（我也试过setTimeout和使用Observable，都不太成功）：

api.receive('hotkey', (event, arg) => {
  this.onHotkey(shortcut as Shortcut);
});
api.send('setHotkeyListener');

热键实现调用与处理this.dialog.open(...) 业务的按钮相同的方法。

该api通过preload.js中的contextBridge实现如下：

const {
  contextBridge,
  ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
  "api", {
    sendSync: (channel, data) => {
      return ipcRenderer.sendSync(channel, data);
    },
    send: (channel, data) => {
      ipcRenderer.send(channel, data);
    },
    receive: (channel, func) => {
      ipcRenderer.on(channel, (...args) => func(...args));
    }
  }
);

我认为问题是缺少一些上下文，Angular 没有从 ipcRenderer 代码路径获取；你知道我错过了什么吗？

【问题讨论】：

标签： angular typescript angular-material electron ipcrenderer

【解决方案1】：

这很难找到，但很容易解决。希望我的问题也能帮助其他人指出正确的方向。我需要使用NgZone 让 Angular 知道它需要检测更改。

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

// ...

declare const api: any;

export class AppComponent implements OnInit {
  constructor(private ngZone: NgZone) {}
  ngOnInit() {
    api.receive('hotkey', (event, arg) => {
      this.ngZone.run(() => this.onHotkey(arg as Shortcut));
    });
    api.send('setHotkeyListener');
  }
  // ...
}

【讨论】：