如何将电子ipcRenderer集成到基于TypeScript的角度2应用中？

Question

我想在我的项目中使用ipcMain / ipcRenderer进行从角度到电子和背部的通信。

电子方面非常清楚：

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

但我不知道如何将电子模块集成到我的角2应用程序中。我使用SystemJS作为模块加载程序，但我是一个新手。

任何帮助都很感激。谢谢。

--马里奥

Answer 1

存在冲突，因为电子使用公共is 模块解析，但是您的代码已经使用系统is规则编译。

有两种解决办法：

稳健的方法.返回的寄存器对象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(...)

Answer 2

最近的一个名为ngx-electron的包使这个过程变得很简单。链接到回购和链接到文章

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是在角区域之外异步更新的。文章

Answer 3

但我不知道如何将电子模块集成到我的角2应用程序中。

您将在UI呈现过程中以电子方式托管angular。ipcMain用于与非呈现子进程通信。