Comment intégrer Electron ipcRenderer dans L'application Angular 2 basée sur le Typographie?
je veux utiliser ipcMain/ipcRenderer sur mon projet de communiquer de L'angle à L'électron et de retour.
Les Électrons secondaires est assez clair:
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';
});
mais je n'ai aucune idée de comment intégrer ce module électronique dans mon application angulaire 2. J'utilise SystemJS comme chargeur de module, mais je suis un débutant avec.
Toute aide appréciée. Grâce.
- - - Mario
5 réponses
il y a conflit, parce que Electron utiliser commonjs module de résolution de problèmes, mais votre code déjà compilé avec systemjs règles.
deux solutions:
Robuste. Enregistrer l'objet require retourné:
<script>
System.set('electron', System.newModule(require('electron')));
</script>
C'est le meilleur, parce que renderer/init.js script charge ce module au démarrage. Les systèmes ne doivent prendre que ça, pas les charges.
Alternative . Utilisation sale tour à la déclaration.
Obtenir de l'électron exemple à l'intérieur d' index.html:
<script>
var electron = require('electron');
</script>
le Déclarer à l'intérieur de votre typescript le fichier de cette façon:
declare var electron: any;
l'Utiliser avec la liberté )
electron.ipcRenderer.send(...)
un paquet récent appelé ngx-electron rend cela facile. Lien vers le repo et lien vers l'article
src/app / app.module.ts
import { NgxElectronModule } from 'ngx-electron';
// other imports
@NgModule({
imports: [NgxElectronModule],
...
})
src/app/votre.composant.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');
}
}
Remarque: NgZone parce que this.message est mis à jour de façon asynchrone à l'extérieur de la zone D'Angular. article
mais je n'ai aucune idée comment intégrer ce module électronique dans mon application 2 angulaire
Vous avez angular hébergé dans le processus de rendu de L'interface utilisateur en électron. ipcMain est utilisé pour communiquer à des processus enfants non rendus.
cela devrait juste être un cas d'exiger le ipcRenderer module dans votre fichier html principal (electron vous le fournira):
<script>
var ipc = require('electron').ipcRenderer;
var response = ipc.sendSync('getSomething');
console.log(response); // prints 'something'
</script>
et ensuite configurer un handler dans votre fichier JS principal:
const ipcMain = require('electron').ipcMain;
ipcMain.on('getSomething', function(event, arg) {
event.returnValue = 'something';
});
C'est tout ce qu'il devrait être.
ma solution:
configurer un baseUrl dans tsconfig.json
à la racine du répertoire pointé par la baseUrl, créer un répertoire "électron". A l'intérieur de ce répertoire, un index de fichier.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;
(idéalement exporter par défaut [...] ("électron"), mais il n'est pas possible de l'analyser statiquement...)
maintenant, je peux avoir dans mon moteur de rendu processus:
import {remote} from 'electron';
console.log(remote);
Espérons que cela a du sens...
avec typings activé:
///<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: typographies I got is from:
{
"globalDependencies": {
"electron": "registry:dt/electron#1.4.8+20161220141501"
}
}