Javascript 我可以在加载内容时显示组件吗？-角度2+；

是否可以在角度项目的index.html中加载组件，而不是在

之间加载…

加载Angular应用程序时，如果页面加载时连接缓慢等，则index.html文件中

标记之间显示的内容将显示在屏幕上

我想在这一点上放置一个微调器，使它看起来像背景中发生了什么，而不是有一个空白的白色屏幕

以下是微调器的代码：

.lds环{
显示：内联块；
位置：相对位置；
宽度：64px；
高度：64px；
}
.lds环分区{
框大小：边框框；
显示：块；
位置：绝对位置；
宽度：51px；
高度：51px；
利润率：6px；
边框：6px固态变量（--pa红色）；
边界半径：50%；
动画：lds环1.2s立方贝塞尔（0.5,0.5,1）无限大；
边框颜色：var（--pa红色）透明；
}
.lds环形分区：第n个子分区（1）{
动画延迟：-0.45秒；
}
.lds环形分区：第n个孩子（2）{
动画延迟：-0.3s；
}
.lds环形分区：第n个孩子（3）{
动画延迟：-0.15秒；
}
@关键帧lds环{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
身体{
背景：灰色；
}

---

没有解决方案，因为加载需要很长时间的原因是加载应用程序模块。模板的解析是在这里完成的，所以您想要的是不可能的。Angular还会忽略

app root

标记中的任何内容

唯一的方法就是在

index.html

中使用纯html和css，或者看看服务器端渲染

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

或者创建两个不同的角度应用程序，一个只是微调器，另一个在实际应用程序上。您的微调器将首先加载，速度非常快，并很快被主应用程序取代，这很可爱，但一点也不琐碎，而且需要相当长的时间才能实现

---

所以，我仍然坚持我原来的答案，不要这样做，只需使用简单的html和css添加微调器。这是最快和最灵敏的。如果你担心SEO，那么你可以看看SSR。

在Tomas Trajan的这篇文章中，html和css有一个很好的解决方案。 您可以将此css添加到index.html的头部或styles.css文件中

<style type="text/css">
  body, html {
    height: 100%;
  }
  .app-loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .app-loading .spinner {
    height: 200px;
    width: 200px;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .app-loading .spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #ddd;
  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
</style>

正文，html{
身高：100%；
}
.应用程序加载{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
.app加载.spinner{
高度：200px；
宽度：200px；
动画：旋转2s线性无限；
变换原点：中心；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
.app加载.spinner.path{
笔划阵列：1200；
笔划偏移：0；
动画：dash 1.5s轻松输入输出无限；
笔划线头：圆形；
行程：#ddd；
}
@关键帧旋转{
100% {
变换：旋转（360度）；
}
}
@关键帧破折号{
0% {
笔划阵列：1200；
笔划偏移：0；
}
50% {
行程：89200；
行程偏移：-35px；
}
100% {
行程：89200；
行程偏移：-124px；
}
}

并在index.html正文中添加

  <app-root>
    <!-- selector from app.component.ts -->

     <!-- loading layout replaced by app after startupp -->
     <div class="app-loading">
       <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke- 
         width="2" stroke-miterlimit="10"/>
       </svg>
     </div>

</app-root>

---

，您可以在那里查看。希望它对您有所帮助。
请在您的实际答案中列出问题的解决方案，因为链接的网站可能会更改或不可用，从而使您的帖子变得无用。