Angular 预引导加载屏幕
我正在寻找一个引导前加载屏幕，它与Angular 2类似。我可以推荐一个简单的CSS方法 首先添加Angular 预引导加载屏幕,angular,Angular,我正在寻找一个引导前加载屏幕，它与Angular 2类似。我可以推荐一个简单的CSS方法 首先添加。将div加载到主HTML页面，它应该遵循主应用程序组件元素。例如： 加载。。。 现在，您可以使用myapp:empty+。加载CSS选择器，并在应用启动后使其消失。例如： /*默认。加载样式。加载应不可见，不透明度：0，z索引：-1*/ .装货{ 不透明度：0； 过渡：不透明度。8s缓进缓出； 位置：固定； 身高：100%； 宽度：100%； 排名：0； 左：0； 背景：#000； z指数：-
。将div加载到主HTML页面，它应该遵循主应用程序组件元素。例如：
加载。。。
现在，您可以使用myapp:empty+。加载CSS选择器，并在应用启动后使其消失。例如：
/*默认。加载样式。加载应不可见，不透明度：0，z索引：-1*/
.装货{
不透明度：0；
过渡：不透明度。8s缓进缓出；
位置：固定；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景：#000；
z指数：-1；
}
/*。当应用程序尚未启动时，加载屏幕可见，我的应用程序为空*/
我的应用程序：空+加载{
不透明度：1；
z指数：100；
}
如果您在关闭body标记之前放置所有繁重的脚本，并在头部保留加载屏幕所需的最小样式，以便它尽快显示，然后脚本开始加载，那么这种方法效果会更好
下面是一个简单的演示：
演示：我使用了一种简单的方法（尽管我也喜欢另一个答案），使用了令人敬畏的旋转器：
<app-root>
<div class="text-center">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<div>Something witty for your userbase</div>
</div>
</app-root>
为您的用户群提供一些机智的东西
为什么不试试这种方法：
<app-root>
<style type="text/css">
#pre-bootstrap {
background-color: #262626;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 999999;
}
#pre-bootstrap div.messaging {
color: #FFFFFF;
font-family: monospace;
left: 0px;
margin-top: -37px;
position: absolute;
right: 0px;
text-align: center;
top: 50%;
}
#pre-bootstrap h1 {
font-size: 26px;
line-height: 35px;
margin: 0px 0px 20px 0px;
}
#pre-bootstrap p {
font-size: 18px;
line-height: 14px;
margin: 0px 0px 0px 0px;
}
</style>
<div id="pre-bootstrap">
<div class="messaging">
<h1>
App is Loading
</h1>
<p>
Please stand by for your ticket to awesome-town!
</p>
</div>
</div>
</app-root>
#预引导{
背景色：#262626；
底部：0px；
左：0px；
位置：固定；
右：0px；
顶部：0px；
z指数：999999；
}
#预引导分区消息传递{
颜色：#FFFFFF；
字体系列：monospace；
左：0px；
利润上限：-37像素；
位置：绝对位置；
右：0px；
文本对齐：居中；
最高：50%；
}
#预引导h1{
字号：26px；
线高：35px；
保证金：0px 0px 20px 0px；
}
#预引导p{
字号：18px；
线高：14px；
保证金：0px 0px 0px 0px；
}
应用程序正在加载
请准备好你的票，去令人敬畏的小镇！
我想最好的方法是在加载div HTML中使用内联样式（显示）。然后在css中有一个类要隐藏，并使用ngOnInit将该类包含在加载div中
在这种情况下，我们将首先使用html呈现样式。。显示加载后（下载css并运行js），它将拥有隐藏它的类
导出类AppComponent实现OnInit{
公共加载=错误；
恩戈尼尼特（）{
this.loaded=true；
}
}
.loading.loaded{
z指数：-1；
不透明度：0；
}
您可以执行以下操作：
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
.splash {
opacity: 1;
z-index: 1;
visibility: visible;
transition: opacity 1.4s ease-in-out, visibility 1.4s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #1e85c8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
app-root:not(:empty) + .splash {
opacity: 0;
visibility: hidden;
}
.splash_image {
width: 100%;
max-width: 200px;
}
</style>
</head>
<body>
<app-root>
<div class="splash">
<img class="splash_image" src="assets/images/logo.svg" alt="" />
</div>
</app-root>
</body>
</html>
应用程序根目录：空：：之后{
内容：“加载…”；
宽度：100px；
高度：100px；
位置：绝对位置；
显示：块；
最高：50%；
左：50%；
字体大小：20px；
转换：翻译（-50%，-50%）；
}
在Angular project中添加闪屏所需的全部步骤是两步：
1-将此CSS代码添加到index.html的head标记中：
<style>
.splash {
opacity: 1;
z-index: 1;
visibility: visible;
transition: opacity 1.4s ease-in-out, visibility 1.4s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #1e85c8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
app-root:not(:empty) + .splash {
opacity: 0;
visibility: hidden;
}
.splash_image {
width: 100%;
max-width: 200px;
}
</style>
.飞溅{
不透明度：1；
z指数：1；
能见度：可见；
过渡：不透明度1.4s移入移出，可见性1.4s；
位置：固定；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景：#1e85c8；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
应用程序根目录：非（：空）+.splash{
不透明度：0；
可见性：隐藏；
}
.splash_图像{
宽度：100%；
最大宽度：200px；
}
2-然后将此HTML行添加到应用程序根选择器中：
<div class="splash">
<img class="splash_image" src="assets/images/logo.svg" alt="" />
</div>
注意：更改src以获取有效的徽标路径
这样，当Angular设置应用程序根目录的内容时，加载程序将自动消失，我认为这是Angular中启动屏幕的最佳方式
index.html文件的完整代码如下所示：
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
.splash {
opacity: 1;
z-index: 1;
visibility: visible;
transition: opacity 1.4s ease-in-out, visibility 1.4s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #1e85c8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
app-root:not(:empty) + .splash {
opacity: 0;
visibility: hidden;
}
.splash_image {
width: 100%;
max-width: 200px;
}
</style>
</head>
<body>
<app-root>
<div class="splash">
<img class="splash_image" src="assets/images/logo.svg" alt="" />
</div>
</app-root>
</body>
</html>
项目名称
.飞溅{
不透明度：1；
z指数：1；
能见度：可见；
过渡：不透明度1.4s移入移出，可见性1.4s；
位置：固定；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景：#1e85c8；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
应用程序根目录：非（：空）+.splash{
不透明度：0；
可见性：隐藏；
}
.splash_图像{
宽度：100%；
最大宽度：200px；
}
Hey@dfsq，您的解决方案在首次加载页面时起作用。然而，当有多个组件通过RouteConfig加载时（这会导致浏览器窗口首先“跳转”静态内容），我又回到了最初的问题。这就是为什么我认为这里的完整解决方案是使用ng animate与引导完全集成，以及随后加载其他组件。关于如何用纯CSS方法解决这个问题，有什么想法吗？这太复杂了。您可以通过包装到需要在splashscreen上显示的内容来简化方法：例如加载。。。就这些。一旦Angular加载，Angular将自动将“加载…”替换为真实内容。还要记住，splashscreen的目标是在加载Angular之前显示。出于这个原因，ngAnimate或任何特定于角度的工具都不起作用-或者起作用太晚了。。。关于“跳转”的应用程序，在显示任何内容之前，您应该首先找到要跳转的位置。@C