Question

是否可以在Angular项目的index.html中的loading...之间的<app-root>之间加载组件？

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

我想将微调器放置在该点上，以使其看起来像是背景中正在发生某些事情，而不是白屏空白。

以下是微调器的代码：

.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

没有解决方案，因为加载时间很长是因为它正在加载应用程序模块。模板的解析是在这里完成的，所以根本无法实现您想要的。 Angular也会忽略app-root标记内的任何内容。

唯一的方法就是在index.html中使用纯html和CSS，或者看看服务器端渲染。

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

或创建两个不同的角度应用程序，一个仅是微调器，另一个在实际应用程序上。您的微调器将首先加载并且非常快，并且很快就会被主应用程序替换，这很可爱，但一点也不微不足道，并且需要花费一些时间来实现。

如此，我仍然坚持我的原始答案，不要那样做，只使用普通的html和css添加一个微调框。这是最快，响应最快的。如果您担心SEO，那么可以看看SSR。

Answer 2

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>

，然后在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>

这是全文的链接。

https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554，您可以在此处查看。希望它会有所帮助。

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

2 个答案: