如何
实现例如在引导完成后缓慢淡出的初始屏幕。
我正在阅读本教程(第二种方法(，但它是为 systemjs 编写的。
为了节省时间，我已经知道这个：
.loading {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: #fff;
background: #000;
z-index: -1;
}
my-app:empty + .loading {
opacity: 1;
z-index: 100;
}
my-app:empty + .loading h1 {
color: #EEE;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translate(0, -50%);
}
那不干净！
您实际上可以轻松做到这一点。我遵循了 Bennadel 博客的示例，但对其进行了轻微修改，以便 html 如下所示：
<html>
<head>
<style type="text/css">
// CSS style with `transition` animation
// so that when you apply a class i.e. `.loaded { opacity: 0 }`
// it will smoothly fade out
// Also this needs to be with a z-index: 9999 so that it will
// show over `app-root`.
</style>
</head>
<body>
<app-root></app-root>
<div id="my-splash-screen">
Loading animation or what ever...
</div>
</body>
</html>
然后在 Angular 2+ 应用程序的src文件夹中，您将找到main.ts文件。最初，文件的内容将是默认的，例如：
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
这里的关键是在platformBrowserDynamic()部分的.catch()块之前附加一个.then()，这将神奇地将 css 类应用于my-splash-screen，等待一小会儿，然后删除飞溅。换句话说，代码将变成这样：
platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => {
let splashScreen = document.getElementById('my-splash-screen');
splashScreen.setAttribute('class', 'loaded');
setTimeout(function(){ splashScreen.remove(); }, 1300); // change the timeout to be almost the same as the transition animation.
})
.catch(err => console.log(err));