内容加载时可以显示组件吗？ - Angular2 +

Question

是否有可能加载的地方的一个组成部分loading...之间<app-root>的角项目的index.html内？

加载Angular应用程序时,如果页面加载时连接速度较慢等,则<app-root></app-root>index.html文件中的标记之间显示的内容将显示在屏幕上.

我想要在这一点上放置一个微调器,使它看起来像是在背景中发生的事情而不是一个空白的白色屏幕.

这是微调器的代码:

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid var(--pa-red);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--pa-red) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  background: grey;
}

<div class="lds-ring">
  <div></div>
  <div></div>
  <div></div>
</div>

如果我在实际index.html文件中使用它确实有效.但是,如果我将此作为我的其他组件中的一个组件并使用选择器加载它,即:

<app-root>
   <app-spinner></app-spinner>
</app-root>

没有显示任何内容,等待时会看到白色屏幕.

这个问题有方法解决吗？

Answer 1

没有解决方案,因为加载需要很长时间的原因是因为它正在加载app模块.解析模板在这里完成,所以你想要的,是不可能的.Angular也会忽略app-root标签内的任何内容.

唯一的方法就是使用简单的html和css index.html,或者看看Server Side Rendering.

您还可以尝试创建一种加载速度非常快的应用程序shell,并在其间加载微调器组件.

或者创建两个不同的角度应用程序,一个只是一个微调器,另一个是实际应用程序.您的微调器将首先加载并且非常快速,并且很快被主应用程序取代,这很可爱但不是微不足道的,并且需要相当长的时间来实现.

Sooo,我仍然坚持我的原始答案,不要这样做,只需使用普通的html和CSS添加一个微调器.这是最快,响应最快的.如果你担心SEO,那么你可以看看SSR.