前回 Angular での Electron 環境構築したので次は Angular から Electron のイベント呼び出し。
IPC（inter-process communication module of Electron）の追加
Electron の main.js に ipcMain を追加
const { app, BrowserWindow, ipcMain } = require('electron');
IPC は ここを参照すると IPC は Electron のプロセス間通信モジュールらしい。
IPC を利用したイベントの定義
引き続き main.js に以下を追加。
ipcMain.on('testIpc', (event, arg) => {
console.log('IPC のテスト');
})
Angular component に IPC 用の処理を追加
/sample1/src/app/app.component.ts を以下に。
import { Component } from '@angular/core';
import { IpcRenderer } from 'electron';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.scss'],
templateUrl: './app.component.html',
})
export class AppComponent {
public title = 'sample1';
private ipc: IpcRenderer;
constructor() {
if ((window as any).require) {
try {
this.ipc = (window as any).require('electron').ipcRenderer;
} catch (e) {
throw e;
}
} else {
console.warn('App not running inside Electron!');
}
}
// ボタンクリックで ipc の指定イベント呼び出し
public clickIpcTestBtn() {
this.ipc.send('testIpc');
}
}
レイアウトにボタン追加
/sample1/src/app/app.component.html をわかりやすく以下のみにに。
<button type="button" name="button" (click)="clickIpcTestBtn()">
IPC のテスト
</button>
動作確認
npm run start:electron
でビルド、ボタンクリックでターミナルのログに
IPC のテスト
と出るようになる。
次はローカルファイル呼び出し。