从角度组件关闭电子应用程序

Question

我正在尝试弄清楚如何关闭带有角度组件的电子应用程序。我通过在 BrowserWindow({... inside main.js 中设置 frame: false 来删除菜单栏。我在电子应用程序的右上角有一个来自组件的关闭按钮。我希望能够从点击时的component.ts文件，但我还没有看到任何从角度组件关闭电子的示例。

我认为以下方法会起作用，但没有。我正在从 main.js 导出一个函数并从组件中调用该函数。 像这样（见closeApp()）：

const { app, BrowserWindow } = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.maximize();
  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

...

function closeApp() {
  mainWindow = null
}

export { closeApp };

然后我会尝试将其导入到组件中

import { Component, OnInit } from '@angular/core';
import { closeApp } from '../../../main.js';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }
  testClose() {
    closeApp();
  }

}

如何从角度关闭电子应用程序？感谢您的帮助！

Answer 1

您可以在浏览器窗口中使用这样的代码。请记住，它需要enableRemoteModule，出于安全原因不建议这样做。你可以用更复杂的代码来解决这个问题，但这应该会告诉你基本的想法

更简单但不太安全的方法

在你的主进程中：

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    fullscreen: false,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })

来自您的mainWindow，在渲染器中

点击您应用的关闭按钮（您的自定义按钮）后，您应该让它运行以下逻辑：

const win = remote.getCurrentWindow();
win.close();

https://www.electronjs.org/docs/api/browser-window#winclose

win.destroy() 也可用，但应首选win.close()。

---

更难但更安全的方法

这需要使用预加载脚本这是另一个问题，但我将包含这样做的代码，但由于多种原因很难开始工作。

也就是说，从长远来看，这是您实现事物的目标。

  import { browserWindow, ipcMain } from 'electron';

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    fullscreen: false,
    preload: [Absolute file path to your preload file],
    webPreferences: {}
  });

  ipcMain.handle('close-main-window', async (evt) => {
    mainWindow.close();
    // You can also return values from here

  });

preload.js

  const { ipcRenderer } = require('electron');

  // We only pass closeWindow to be used in the renderer page, rather than passing the entire ipcRenderer, which is a security issue
  const closeWindow = async () => {
     await ipcRenderer.invoke('close-main-window'); // We don't actually need async/await here, but if you were returning a value from `ipcRenderer.invoke` then you would need async/await
  }

  window.api = {
    closeWindow
  }

渲染器页面

  
// I don't know Angular, but just call window.api.closeWindow() in response to the button you want to use

Answer 2

将此代码添加到您的 main.ts 文件中

mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    
    mainWindow = null;
    
  });

return mainWindow;

mainWindow.on("Closed") 将捕获十字图标上的单击事件，届时我们将返回将关闭窗口的 win null。

我的 main.ts 文件和它的功能。

import { app, BrowserWindow, screen, Menu } from 'electron';
import * as path from 'path';
import * as url from 'url';
import * as electronLocalshortcut from 'electron-localshortcut'

let win: BrowserWindow = null;
const args = process.argv.slice(1),
  serve = args.some(val => val === '--serve');

function createWindow(): BrowserWindow {

  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    icon: path.join(__dirname, 'dist/assets/logo.png'),
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
    },
  });


  // Disable refresh
  win.on('focus', (event) => {
    console.log("event of on fucous ");
    electronLocalshortcut.register(win, ['CommandOrControl+R', 'CommandOrControl+Shift+R', 'F5'], () => { })
  })

  win.on('blur', (event) => {
    console.log("event of on blue ");
    electronLocalshortcut.unregisterAll(win)
  })
  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  if (serve) {
    win.webContents.openDevTools();
  }

  win.on('close', (e) => {
    // Do your control here

    e.preventDefault();

  });
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    // if (JSON.parse(localStorage.getItem('isRunning'))) {
    //   alert('Your timer is running')
    // } else {
    win = null;
    // }
  });


  return win;
}

try {

  // Custom menu.
  const isMac = process.platform === 'darwin'

  const template: any = [
    // { role: 'fileMenu' }
    {
      label: 'File',
      submenu: [
        isMac ? { role: 'close' } : { role: 'quit' }
      ]
    },
    // { role: 'editMenu' }
    {
      label: 'Window',
      submenu: [
        { role: 'minimize' },
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow);

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });

  app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow();
    }
  });

} catch (e) {
  // Catch Error
  // throw e;
}

谢谢。

Answer 3

这可能是也可能不是最好的方法，但它似乎是一种解决方法： 为了捕捉这个事件，我使用了“window.onbeforeunload”。

例如：

export class AppComponent implements OnInit {

  
  ngOnInit(): void {   

    window.onbeforeunload = (e: BeforeUnloadEvent) => {
     // Do something...
    }
  }
}