语境
我正在创建一个 Angular 应用程序的桌面版本,为此我正在使用 Electron 。
打开主窗口非常简单:
win = new BrowserWindow({
width: 1280,
height: 720,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
});
win.loadURL(`file://${__dirname}/dist/index.html`);
这将打开一个新窗口,解析为基本 href 路径,一切正常。
在我的应用程序中,我想利用 Electron 提供诸如覆盖窗口之类的东西,以非常紧凑的方式向用户显示信息。
为此,由于路由器的 queryParams 绑定(bind),我有一个可以呈现为覆盖 (
/alarms?overlay=true
) 的页面。上面提到的一切都可以使用浏览器完美运行,覆盖还可以,一切都很好。
问题
为了在 Electron 上打开这个覆盖,我提供了一个进行 ipc 调用的按钮:
showOverlay(): void {
this.ipc.send('overlay', '/alarms');
}
这是来自 IpcService 的发送方法(在上面的函数中命名为 ipc):
public send(channel: string, ...args: any[]): void {
if (this._ipc !== undefined) {
return this._ipc.send(channel, ...args);
}
}
另一边的代码:
ipcMain.on('overlay', (event, url) => {
const overlayWindowConfig = {
height: 400,
width: 280,
resizable: true,
frame: false,
alwaysOnTop: true,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: false
}
};
const overlay = new BrowserWindow(overlayWindowConfig);
overlay.loadURL(`file://${__dirname}/dist/index.html#${url}?overlay=true`);
openedOverlays[url] = overlay;
});
如您所见,我正在尝试直接在给定页面上打开一个新窗口,因此它可以仅加载叠加层,而无需加载主页然后导航到警报(由于叠加层的大小,这将很难看 window )。
配置
./
. useHash: true
在 Electron 版中,因为这就是我应该能够处理与 file://
的深度链接的方式. 已经试过了
基础引用
正如我在 github issue 上看到的那样,将基本 href 设置为空 ("")它应该可以使用它。
* 事实证明,这在没有 aot 的情况下可以完美运行,使用 aot 构建应用程序会在窗口打开时打破窗口,并显示以下消息(在 Electron 的 devTools 中):
Error: Cannot match any routes. URL Segment: 'index.html'
这也破坏了我所有的 Assets 链接,因为它们试图从
dist/index.html/assets/
加载而不是 dist/assets/
.链接修改
我试图通过在
#
之前添加斜杠来更改打开的链接。 ,没有改变任何东西。现在,我正在构建没有 aot 的 Electron 应用程序,但这不是我想用于发布的解决方案,能够通过深度链接从 Electron 加载帧并启用 aot 是我需要能够做到的做。
最佳答案
我不确定我是否完全理解问题出在哪里,但我认为您可以尝试实现 UrlSerializer
兼容 file:///
协议(protocol)和文件名或至少检查 DefaultUrlSerializer
执行。
关于angular - 使用文件 ://with aot 在新窗口上进行深度链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50418690/