如何将 Electron ipcRenderer 集成到基于 TypeScript 的 Angular 2 应用程序中？

Question

我想在我的项目中使用 ipcMain / ipcRenderer 在 Angular 与 Electron 之间来回通信。

Electron 方面非常清楚：

 const
  electron = require('electron'),
  ipcMain = electron.ipcMain,
;

ipcMain.on('asynchronous-message', function(event, arg) {
  console.debug('ipc.async', arg);
  event.sender.send('asynchronous-reply', 'async-pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.debug('ipc.sync', arg);
  event.returnValue = 'sync-pong';
});

但是我不知道如何将该 Electron 模块集成到我的 Angular 2 应用程序中。我使用 SystemJS 作为模块加载器，但我是它的新手。

任何帮助表示赞赏。谢谢。

—马里奥

原文由 Sommereder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有冲突，因为 Electron 使用 commonjs 模块解析，但是你的代码已经用 systemjs 规则编译了。

两种解决方案：

健壮的方式。注册对象 require 返回：

 <script>
    System.set('electron', System.newModule(require('electron')));
</script>

这是最好的，因为 renderer/init.js 脚本在启动时加载该模块。 SystemJS 必须只接受它，而不是加载。

替代方式。在声明中使用肮脏的把戏。

在里面获取电子实例 index.html ：

 <script>
    var electron = require('electron');
</script>

在你的 typescript 文件中这样声明它：

 declare var electron: any;

自由使用它）

 electron.ipcRenderer.send(...)

原文由 DenisKolodin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一个名为 ngx-electron 的最新软件包使这很容易。 链接到 repo 和 链接到文章

src/app/app.module.ts

 import { NgxElectronModule } from 'ngx-electron';
// other imports
@NgModule({
  imports: [NgxElectronModule],
  ...
})

src/app/your.component.ts

 import { Component, NgZone } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-your',
  templateUrl: 'your.component.html'
})
export class YourComponent {
    message: string;

    constructor(private _electronService: ElectronService, private _ngZone: NgZone) {
        this._electronService.ipcRenderer.on('asynchronous-reply', (event, arg) => {
            this._ngZone.run(() => {
                let reply = `Asynchronous message reply: ${arg}`;
                this.message = reply;
            });
        }
    }

    playPingPong() {
        this._electronService.ipcRenderer.send('asynchronous-message', 'ping');
    }
}

注意：使用 NgZone 是因为 this.message 在 Angular 区域之外异步更新。 文章

原文由 user3587412 发布，翻译遵循 CC BY-SA 3.0 许可协议