【发布时间】：2016-02-06 16:34:16
【问题描述】：
我正在寻找类似于this example 的预引导加载屏幕，但适用于 Angular 2。
【问题讨论】：
标签： angular
【发布时间】：2016-02-06 16:34:16
【问题描述】：
我可以建议一种简单的 CSS 方法。
首先将.loading div 添加到主HTML 页面中，它应该跟随主应用程序组件元素。例如：
<my-app></my-app>
<div class="loading">
<h1>Loading...</h1>
</div>
现在您可以使用my-app:empty + .loading CSS 选择器定位和设置初始屏幕样式，并在应用启动后立即消失。示例：
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
opacity: 1;
z-index: 100;
}
如果您将所有繁重的脚本放在关闭 body 标记之前，并且只在头部保留加载屏幕所需的最少样式以便它尽快显示然后脚本开始加载，则此方法效果更好。
这是一个简单的演示：
【讨论】：
-
嘿@dfsq，您的解决方案在页面首次加载时有效。但是，当通过 RouteConfig 加载多个组件时（这会导致浏览器窗口首先“跳转”静态内容），我又回到了最初的问题。这就是为什么我认为这里的完整解决方案是使用 ng animate 与引导程序完全集成以及随后加载其他组件。关于如何以纯 CSS 方法解决此问题的任何想法？
-
这太复杂了。您可以通过将需要在启动画面上显示的内容包装到
中来简化方法：例如 Loading... 仅此而已。加载 Angular 后，Angular 将自动用真实内容替换“正在加载...”。还要记住，启动画面的目的是在加载 Angular 之前显示。出于这个原因，ngAnimate 或任何特定于 Angular 的东西都不会工作 - 或者工作得太晚了......关于“跳跃”的应用程序，你可能应该在显示任何内容之前先找出你想去的地方。 -
@ChristopheVidal 您所建议的问题以及为什么我决定在我的回答中不采用这种方式（我首先尝试了这种明显的方法）是您将无法使用 CSS 过渡这个案例。如果您只需要静态闪屏，那当然更好。我的解决方案更通用。
-
毫无疑问，当需要这种转换时，您使用的方法是明智的。但我只想指出，在 angular2 中添加闪屏（可能带有动画但不带过渡）非常简单。
-
代替不透明过渡，您可以使用过渡延迟来防止
my-app之间的空白不再为空，因为没有完全加载：transition: opacity 0 ease-in-out 1s;
我使用 FontAwesome 微调器采用了一种简单的方法（虽然我也喜欢其他答案）：
<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>
【讨论】：
-
您好，您是否发现此加载微调器未在移动设备上显示？我这样做了，手机从来没有显示过。我得到白屏，然后应用程序显示。你有没有做任何事情来解决这个问题？
-
它似乎适用于 iPad 和 Android - 注意：在开始加载任何内容之前会有延迟，然后在加载整个 SPA 之前出现此微调器。您使用的是什么手机/操作系统？
-
这种方法在使用延迟加载时会导致 1 秒的空白页
为什么不试试这个方法：
<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>
【讨论】：
你可以这样做：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
app-root:empty::after {
content: 'Loading…';
width: 100px;
height: 100px;
position: absolute;
display: block;
top: 50%;
left: 50%;
font-size: 20px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<app-root></app-root>
</body>
</html>非常简单的方法。当然，您可以用加载器图像替换文本。
【讨论】：
我想最好的方法是在加载 div HTML 中使用内联样式（以显示）。然后在 css 中你有一个类来隐藏并使用 ngOnInit 将该类包含在加载 div 中。
在这种情况下，我们将首先让 html 呈现样式.. 显示加载，毕竟（下载 css 并运行 js）它将具有隐藏它的类。
export class AppComponent implements OnInit {
public loaded=false;
ngOnInit() {
this.loaded=true;
}
} .loading.loaded {
z-index: -1;
opacity: 0;
}<div class="loading"
style="opacity: 0.9;
color: #EEE;
position: absolute;
top: 0;
width: 100%;
text-align: center;
transition: opacity .8s ease-in-out;
height: 100%;
background: #fff;
z-index: 100;
display: table;"
[class.loaded]="loaded">
<md-spinner
style="display: table-cell;
vertical-align: middle;"
></md-spinner>
</div>我不得不去掉角度视图内组件的可见性，因为它们在加载时没有任何样式加载（就像没有样式的 flickr 一样）。所以在css中我隐藏并在app.html中我显示
footer, header, home-view, homebuyer-view, homeseller-view, homecommerce-view,
.mat-select-placeholder{
visibility: hidden !important;
}<style *ngIf="loaded">
footer, header,home-view, homebuyer-view, homeseller-view, homecommerce-view,
.mat-select-placeholder{
visibility: visible !important;
}
</style>【讨论】：
在 Angular 项目中添加启动画面所需的只是两个步骤：
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>
2- 然后将此 HTML 行添加到 app-root 选择器中：
<div class="splash">
<img class="splash_image" src="assets/images/logo.svg" alt="" />
</div>
注意：更改 src 以获得有效的徽标路径...
这样，当Angular设置app-root的内容时，loader会自动消失，我认为这是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>
【讨论】：