Angular 电子/角度项目加载显示图像为飞溅

我有一个角度/电子应用程序

应用程序加载的内容我需要将图像显示为启动屏幕，然后在加载完成后消失

在my index.html中，我有：

<app-root>Loading ...</app-root>

正在加载。。。

但我从来没有看到过。。。我需要一个图像在加载。。。就是让它停留几秒钟然后消失

例如：

<app-root><div id="splash"><img src="assets/splash.png" /></div></app-root>

我一直在谷歌上搜索，但找不到任何东西，这就是为什么我没有任何代码显示

---

我怎么能做到这一点呢？

我不知道角度，但我有一个电子应用程序，带有飞溅屏幕

您需要为splashscreen创建一个单独的窗口，首先显示它，然后在应用程序准备就绪时关闭它

结构如下所示：

splash.js

const path=require（'path'））
const StandardWindow=require（“./StandardWindow”）
const loadCss=require（“./loadCss”）
函数splash（）{
const splashScreen=新标准窗口({
文件：“splash.html”，
宽度：450，
身高：200，
帧：假，
可调整大小：false，
背景颜色：“#fff”
})//构建splashscreen窗口
splashScreen.show（）//立即显示
splashScreen.OnDiFinishLoad=函数（）{
loadCss（这个，path.join（uu dirname，'splash.css'））
}//加载html后加载启动css
返回飞溅屏
}
module.exports=splash

loadCss.js

const fs=require（'fs'））
函数加载CSS（elWindow、cssPath）{
fs.readFile(
cssPath，
‘utf-8’，
（错误，数据）=>{
如果（错误）抛出错误
const css=data.replace（/\s{2,10}/g'，）.trim（）
elWindow.webContents.insertCSS（css）
console.log（'loaded css:'+css.substring（0,20）+'…'））
}
)
}
module.exports=loadCss

StandardWindow.js

const{BrowserWindow}=require（'electron'））
const path=require（'路径'）
const loadCss=require（“./loadCss”）
//默认窗口设置
const defaultProps={
宽度：500，
身高：800，
秀:假,，
//electron V5的更新+
网络首选项：{
无融合：对
}
}
类StandardWindow扩展了BrowserWindow{
建造师({
文件
开发工具，
OnDiFinishLoad，
在ReadyToShow上，
…窗台
}) {
console.log（'正在创建StandardWindow…'）
//使用这些道具调用新浏览器窗口
超级（{…defaultProps，…windowSettings}）
此.loadFile（文件）
if（devTools）this.webContents.openDevTools（）
this.webContents.on（'did-finish-load'，（）=>{
loadCss（这个，path.join（uu dirname，'/shared.css'））
if（onDidFinishLoad）onDidFinishLoad（）
如果（this.onDidFinishLoad）this.onDidFinishLoad（）
})
//准备好防止闪烁时优雅地显示
这个.once（'ready-to-show'，（）=>{
this.show（）
if（onReadyToShow）onReadyToShow（）
如果（this.onReadyToShow）this.onReadyToShow（）
})
console.log（“…创建了StandardWindow”）
}
}
module.exports=StandardWindow

然后在main.js中

const{app}=require（'electron'）
const splash=require（“./splash/splash”）
const StandardWindow=require（“./StandardWindow”）
app.on（'ready'，function（）{
让splashscreen=splash（）
//然后创建主窗口并启动流程
让mainWindow=新的标准窗口({
devTools：没错，
文件：“main.html”，
宽度：800，
身高：600，
网络首选项：{
//preload:path.join（uu dirname，'preload.js'）
},
onDidFinishLoad:\uUx=>{
splashScreen.close（）
splashScreen=null
//当窗口准备就绪时，关闭溅水幕！
}
})
})
应用程序打开（'window-all-closed'，函数（）{
if（process.platform！=“darwin”）app.quit（）
})

然后你只需要创建“splash.html”和“splash.js”来编码你的splashscreen和主窗口的“main.html”

希望对你有点帮助