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

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

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

show变量应确定它是否出现

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

---

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

您可以使用splashscreen类添加一个div，该类将在index.html中显示启动屏幕图像，而不是添加到login.html中

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

---

因此，我正在尝试将splash添加到登录中，而不是单独的组件，并且我应该尝试将其从app中删除。component.ts？index.html中的内容将首先加载。在那里添加它是一个不错的选择。您可以创建seprate组件或“div”。这取决于你。在app.component.tsA mate中删除了它，让我使用window.onload，然后我觉得很傻。。。虽然我的一个前辈告诉我，我应该寻找一个角度的替代方案，因为window.onload是纯javascript，它不是一个很好的修复程序，但你的意思是我必须在app.component.ts上删除它吗？，我使用了上面的代码，但它做的是，它在中间删除元素，而它根本不显示。我认为这就是您需要的

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

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