Angular 5如何等待styles.css被加载答案

【问题标题】：Angular 5 how to wait for styles.css is loadedAngular 5如何等待styles.css被加载
【发布时间】：2018-05-10 13:10:12
【问题描述】：

我正在制作一个角度应用程序，我需要预加载一些数据。因此，在加载数据之前，用户将看到一个加载页面。

但我的问题是，如果页面已加载，styless.css 文件中的样式尚未加载。该文件仅在 1 秒后加载。这意味着用户将首先看到这个：

只有在文件加载后，用户才会看到：

我的问题：如何等待 style.css 文件被加载？

html代码：

.saving {
   text-align: center;
   position: absolute;
   font-size: 35px;
   width: 250px;
   height: 70px;
   line-height: 50px;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-family: helvetica, arial, sans-serif;
   text-transform: uppercase;
   font-weight: 900;
   letter-spacing: 0.2em;
 }

 .saving span {
   font-size: 50px;
   animation-name: blink;
   animation-duration: 1.4s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }

 .saving span:nth-child(2) {
   animation-delay: .2s;
 }

 .saving span:nth-child(3) {
   animation-delay: .4s;
 }

 @keyframes blink {
   0% {
     opacity: .2;
   }
   20% {
     opacity: 1;
   }
   100% {
     opacity: .2;
   }
 }

html:

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Root</title>
  <base href="/" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet" />
</head>
<body>
  <root-page></root-page>


<div>
  <p class="saving">Loading<span>.</span><span>.</span><span>.</span></p>
</div>


</body>
</html>

【问题讨论】：

标签： html css angular

【解决方案1】：

在index.html 的<style> 标记中插入页面加载动画所需的css。（所以复制粘贴“保存”类）

或者，如果您确实需要引用整个 css，请使用 <script src="..."> 标签从 index.html 中的资产中引用它。

【讨论】：

愚蠢的错误。以为我已经在某处引用了该文件。谢谢