angular - 如何从 Electron 窗口正确加载 Angular 分量-6ren

angular - 如何从 Electron 窗口正确加载 Angular 分量

转载作者：行者123 更新时间：2023-12-03 12:40:21

您好我正在尝试使用带 Angular Electron 构建桌面应用程序，主要问题是在用户登录后我找不到正确加载主要组件的方法。正如您在 main.js 中看到的，这是我创建两个窗口(1 个用于登录的子窗口)和 1 个(主窗口)的主进程，我首先显示子窗口并隐藏主窗口，直到用户从子窗口登录并将以下命令发送到main.js 显示主窗口，因为用户已成功登录。

this.electronService.ipcRenderer.send("entry-accepted", "ping")

main.js 中的代码

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

let win
let child

function createWindows() {

  win = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    show: false
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, `./src/app/main-nav/main-nav.component.html`),
    protocol: 'file',
    slashes: true
  }))

  child = new BrowserWindow({
    parent: win,
    width: 600,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    frame: false
  })

  child.loadURL(url.format({
    pathname: path.join(__dirname, `./dist/index.html`),
    protocol: 'file',
    slashes: true
  }))

  child.openDevTools()
}

ipcMain.on('entry-accepted', (event, arg) => {
  if (arg == 'ping') {
    win.show()
    child.hide()
  }
})

app.on('ready', createWindows)

index.html 中的代码

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>AngElectron</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

app.component.html 中的代码

<app-sign-in></app-sign-in>

正如您在图片中看到的，渲染进程与 main 通信的主要功能正在工作，但是没有 CSS 和其他必要的文件，因为我没有使用 dist 作为路径并且文件没有被编译。抱歉，我对带 Angular Electron 完全陌生。

login

main page

最佳答案

A组份:

  login(): void {
    this.model = this.loginForm.value;
    this.authService.login(this.model).subscribe(
      response => {
        this.electronService.ipcRenderer.send('navigateToMain', '/dist/index.html#/main-nav');
      },
      error => {
        console.log(error);
      }
    );
  }

Main.js

const {
  app,
  BrowserWindow,
  ipcMain,
  dialog
} = require('electron')

function createWindow() {
  mainWindow = new BrowserWindow({
      width: 1300,
      height: 800,
      maxHeight: 800,
      maxWidth: 1300,
      useHash: true,
      maximizable: false,
      webPreferences: {
        nodeIntegration: true
      },
      show: false
    }),

    signInSignUpWindow = new BrowserWindow({
      width: 500,
      height: 600,
      useHash: true,
      frame: false,
      maximizable: false,
      resizable: false,
      parent: mainWindow,
      webPreferences: {
        nodeIntegration: true
      },
      show: true
    }),

    signInSignUpWindow.loadURL(`file://${__dirname}` + '/dist/index.html#/init-form')
  signInSignUpWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));


  mainWindow.on('closed', function () {
    mainWindow = null
  })

  signInSignUpWindow.on('closed', function () {
    app.quit()
  })

}


  ipcMain.on('navigateToMain', (event, data) => {
    signInSignUpWindow.hide();
    mainWindow.loadURL(`file://${__dirname}` + data);
    mainWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));
    mainWindow.setMenuBarVisibility(false);
    mainWindow.show();
  })

App.routing.module.ts
添加使用哈希
进口:[RouterModule.forRoot(routes, { useHash: true })]

关于angular - 如何从 Electron 窗口正确加载 Angular 分量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62003743/

文章推荐： javascript - 在 Electron 应用程序中隐藏密码

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

angular - 如何从 Electron 窗口正确加载 Angular 分量