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

您可以添加带有splashscreen类的div来代替在login.html中添加，该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();
    }
}

如何在Angular 6上设置合适的启动屏幕？

1 个答案: