Как правильно загрузить angular компонент из электронного окна - PullRequest
Новая
       68

Как правильно загрузить angular компонент из электронного окна

0 голосов
/ 25 мая 2020

Здравствуйте, я пытаюсь создать настольное приложение, используя электрон с angular, основная проблема заключается в том, что я не могу найти правильный способ загрузить основной компонент после входа пользователя в систему. Как вы можете видеть в main. js, который является основным процессом, я создаю два windows (1 дочерний элемент для входа в систему) и 1 (основной), я сначала показываю дочерний элемент и скрываю основной, пока пользователь не войдет в систему из дочернего окна и не отправлю следующую команду для main. js, чтобы отобразить главное окно, потому что пользователь успешно вошел в систему. 

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

Код в основном. 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)

Код в индексе. 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>

Код в компоненте приложения. html 

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

Как вы На изображениях видно, что основная функция связи процесса рендеринга с main работает, но нет CSS и других необходимых файлов, потому что я не использую dist в качестве пути, и файлы не компилируются. Извините, я совершенно не знаком с электроном с angular.

логин

главная страница

1 Ответ

0 голосов
/ 08 июля 2020

Компонент 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);
      }
    );
  }

Основной. 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

добавить импорт usehash: [RouterModule.for Root (routes, {useHa sh: true})]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...