如何在 Angular 6 上设置合适的启动画面？

Question

一直在尝试设置一个启动画面，以便在我的登录名完全加载之前显示。这是我的“login.component.html”。

<my-splash-page> </my-splash-page>
<div class="">
  <header >
    <ul>
      <li>
 ....

现在飞溅组件应该包含什么我一无所知，我已经尝试使用一些订阅值，但它不太工作。

this.subscription = this.splashService.splashState
      .subscribe((state: LoaderState) => {
        this.show = state.show;
      });

show 变量应该确定它是否出现。

这是一个有点花哨的登录，因此加载图像需要几秒钟，但在 3G 网络上测试我可以清楚地看到启动组件在那里的图像完全加载甚至开始加载之前消失了。

加载所有内容（图片、字体、图标）后，启动画面应该消失，但无法以这种方式工作。

Answer 1

您可以添加一个带有闪屏类的 div，而不是在 login.html 中添加，它将在index.html 中显示闪屏图像。

<div class="splashScreenClass" id="splashScreenClass">
    <h1>Loading...</h1>
</div>

在 app.component.ts

您可以从 DOM 中删除。

ngOnInit(){
  const splashScreen: HTMLElement = document.getElementById('splashScreenClass');
    if (splashScreen) {
      splashScreen.remove();
    }
}