电子和角度 ipcrenderer答案

【问题标题】：Electron and angular ipcrender电子和角度 ipcrenderer
【发布时间】：2021-08-11 17:55:15
【问题描述】：

我尝试从角度调用一些电子 API 并对其进行响应。为了测试，我尝试隐藏块：

electron.ts：

import {app,BrowserWindow,BrowserWindowConstructorOptions, ipcMain} from 'electron'
let window:any = null
app.whenReady().then(()=>{
    const options:BrowserWindowConstructorOptions = {
        width:300,
        height:600,
        title:"test",
        show:false,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation : false
        }
    }
    window = new BrowserWindow(options)

    window.loadFile('some path')
    window.webContents.on('did-finish-load',()=>{
        window.show()
        ipcMain.on('test',(value)=>{
           window.webContents.send('test2')
         
        })
    })
})

应用组件.html：

<div *ngIf='__flag'><h1>Test</h1>
    <button (click)='clickFunction()'>Test button</button>
</div>

应用组件.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ElectronService, NgxElectronModule } from 'ngx-electron';

@Component({
  selector: 'app-component',
  templateUrl: './app-component.html',
})
export class AppComponentComponent implements OnInit {
  
  __flag:boolean = true

  constructor(private route:Router, private elect:ElectronService) { }

  ngOnInit(): void {
  }
  
clickFunction(){
  this.elect.ipcRenderer.send('test')
  this.elect.ipcRenderer.on('test2',()=>{
    this.__flag=false
    console.log(this.__flag);
    
  })
}
}

但只有当我单击按钮两次时，div 才会删除。为什么会发生？我该如何解决？我需要隐藏块然后单击按钮

【问题讨论】：

标签： javascript angular typescript electron

【解决方案1】：

在将消息发送到主进程之后，您只是在 clickFunction 中设置了事件侦听器（this.elect.ipcRenderer.on('test2')。因此，在调用时侦听器尚未侦听从主进程到达。它在第二次单击时工作，因为在第一次单击时已配置侦听器，因此您会收到消息。将您的事件侦听器移至 ngOnInit 函数，应该没问题。

ngOnInit(): void {
    this.elect.ipcRenderer.on('test2',()=>{
        this.__flag=false
        console.log(this.__flag);
    }); 
}
  
clickFunction(){
  this.elect.ipcRenderer.send('test');
}

【讨论】：