Angular2 pre-bootstrap 使用 Webpack 加载屏幕（启动画面）

Question

我如何实现启动画面，例如，在引导完成后慢慢消失。

我正在阅读 this 教程（第二种方法），但它是为 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%);
}

那不干净！

Answer 1

您实际上可以很容易地做到这一点。我按照 bennadel's blog 的示例进行了一些修改，因此 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 class 到 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));

Angular2 pre-bootstrap 使用 Webpack 加载屏幕（启动画面）

Angular2 pre-bootstrap loading screen (splash screen) with Webpack

webpack

webpack-2

angular