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

Question

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

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

现在 splash 组件应该包含的是我一无所知的东西，我已经尝试使用一些订阅值，但它并不完全有效。

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

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

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

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

Answer 1

除了在 login.html 中添加，您还可以添加一个带有 splashscreen 类的 div，它将在 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();
    }
}