有没有办法在 Angular/Electron 应用程序中创建无模式对话框？

Question

有没有办法在 Angular/Electron 应用程序中创建无模式对话框？

我正在查看下面的示例，它们都是模态的：

https://material.angular.io/components/dialog/overview

我需要能够同时打开多个窗口并四处移动它们。但我找不到任何样本。

谢谢。

---

编辑 1：

我尝试了以下方法，但不知何故将我引导至默认页面 index.html：

window.open('/app/shared/settings/user-preferences.html'); 

---

编辑 2：

我也尝试了以下方法，但无法编译。

const { BrowserWindow } = require('electron'); //does not compile!!?
let win = new BrowserWindow({ width: 800, height: 600 });
win.on('closed', () => {
  win = null;
});

win.loadURL(`file://${__dirname}/app/shared/settings/user-preferences.html`);

但这不会编译并给我错误消息：

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\projects\...\MyApp\node_modules\electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in 'C:\projects\...\MyApp\node_modules\electron'

Answer 1

您可以使用window.open() API 通过提供这样的 URL 并在其中使用对话框上下文来打开窗口的新窗口实例：

window.open('https://www.angular.io', 'nameOfWindow');

这是一个有效的example

EDIT1：

考虑到electron API 设置，您还需要执行以下操作：

如果您想使用 Chrome 的内置 window.open() 实现，请在 webPreferences 选项对象中将 nativeWindowOpen 设置为 true。

EDIT2：

考虑到本地文件，您可以这样做：

window.open(`file://${__dirname}/app/shared/settings/user-preferences.html`, 'nameOfWindow')