web-dev-qa-db-ja.com

Electron ipcRendererをTypeScriptに基づいてAngular 2アプリに統合するには？

プロジェクトで ipcMain / ipcRenderer を使用して通信したい= Angular =電子とその逆。

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 を使用します、しかし、私はそれで新人です。

任意の助けに感謝します。ありがとう。

---マリオ

javascripttypescriptangularipcelectron
21
Sommereder

Electronはcommonjsモジュール解決を使用しますが、コードは既にsystemjsでコンパイルされているため、競合がありますルール。

2つのソリューション：

堅牢な方法。登録オブジェクト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(...)
18
DenisKolodin

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

注：this.messageはAngularのゾーン外で非同期に更新されるため、NgZoneが使用されます。 記事

13
user3587412

しかし、そのElectronモジュールを私のAngular 2アプリに統合する方法がわかりません。

ElectronのUIレンダリングプロセス内でangularホストされます。 ipcMainは、レンダリングしていない子プロセスと通信するために使用されます。

2
basarat

これは、メインhtmlファイルにipcRendererモジュールが必要な場合にすぎません（電子はこれを提供します）。

<script>
  var ipc = require('electron').ipcRenderer;
  var response = ipc.sendSync('getSomething');
  console.log(response); // prints 'something'
</script>

次に、メインのjsファイルにハンドラーを設定します。

const ipcMain = require('electron').ipcMain;
ipcMain.on('getSomething', function(event, arg) {
  event.returnValue = 'something';
});

これですべてです。

1
KarlPurk

私の解決策：

tsconfig.jsonでbaseUrlを構成します

baseUrlが指すディレクトリのルートで、ディレクトリ「electron」を作成します。このディレクトリ内のファイルindex.ts：

const electron = (<any>window).require('electron');

export const {BrowserWindowProxy} = electron;
export const {desktopCapturer} = electron;
export const {ipcRenderer} = electron;
export const {remote} = electron;
export const {webFrame} = electron;

（理想的にはデフォルトの[...] require（ 'electron'）をエクスポートしますが、これは静的に分析できません...）

これで、レンダラープロセスに含めることができます。

import {remote} from 'electron';
console.log(remote);

それが理にかなっていることを願っています...

タイピングが有効になっている場合：

///<reference path="../../typings/globals/electron/index.d.ts"/>
const electron = (<any>window).require('electron');

export const BrowserWindowProxy = <Electron.BrowserWindowProxy>electron.BrowserWindowProxy;
export const desktopCapturer = <Electron.DesktopCapturer>electron.desktopCapturer;
export const ipcRenderer = <Electron.IpcRenderer>electron.ipcRenderer;
export const remote = <Electron.Remote>electron.remote;
export const webFrame = <Electron.WebFrame>electron.webFrame;

NB：私が得たタイピングはからのものです：

{
  "globalDependencies": {
    "electron": "registry:dt/electron#1.4.8+20161220141501"
  }
}
1
Charles HETIER

Component.TS

const ipc = require('electron').ipcRenderer;

@Component({
    selector: 'app-my component',.....
})

....

 public testElectronIpc(): void{
        ipc.send('test-alert');
    }

MAIN.JS

// IPC message listeners
ipc.on('test-alert', function (event, arg) {
    console.log('Test alert received from angular component');
})

config

プラグイン：[new webpack.ExternalsPlugin（ 'commonjs'、['desktop-capturer'、 'electron'、 'ipc'、 'ipc-renderer'、 'native-image'、 'remote'、 'web-frame'、 'クリップボード」、「クラッシュレポーター」、「スクリーン」、「シェル」]）]、

0
quickreplyguest