应用程序根标记内的 Angular 代码样式不正确答案

【问题标题】：Angular Code Inside App-Root Tag Not Styling Correctly应用程序根标记内的 Angular 代码样式不正确
【发布时间】：2019-02-13 18:15:14
【问题描述】：

我的 Angular 7 应用程序在初始化时遇到问题。我有一个名为“测试”的课程，它所做的只是将文本颜色更改为红色。我在样式标签内的 index.html 文件中列出了该类，或者在带有我所有全局样式的 styles.scss 文件中列出了该类。我以相同的结果测试了两种方式。我正在使用 angular/cli 和 ng serve 来测试我的应用程序，以下是我的 index.html 页面的布局方式：

<body>
  <app-root>
    <div class="container">
      <span class="testing">Application is loading, please wait...</span>
    </div>
  </app-root>
</body>

期望：跨度内的文本应该是红色的，带有轻微的缩进（通过引导容器类）。

实际结果：

当我在 url 中键入 localhost:4200 并按 Enter 键时，在呈现应用程序之前，文本会显示在屏幕的最左上方，没有红色。
如果我点击刷新，就会发生与 #1 相同的事情。
如果我按 shift+refresh，则在文本缩进到引导容器 div 并变为红色之前的瞬间 #1 发生。

有人可以向我解释这里发生了什么吗？我需要做什么才能在不改变任何瞬间风格的情况下实现#3？如果需要任何其他信息来回答，请告诉我。

【问题讨论】：

标签： html css angular bootstrap-4 initialization

【解决方案1】：

首先，在标签中写一个单词都不是正确的方法，因为它表现为模板指令，或者你可以说空框由 app.component.html 内容填充，这就是你观察很少的原因轻弹（出现在渲染之前）和在 app.component.html 中编写内容并通过 app.component.css / app.component.scss 设置样式的最佳方式，或者您可以在 css 的主文件中编写该 css（style.css）但是每个类都应该在它们的组件样式中。因为角度是关于单独的模块/组件/部分。

希望对你有帮助

【讨论】：

问题是我的 app.component.html 模板中已经有内容，这是我的应用程序处理的大部分内容。所以小电影会一直在那里发生吗？您是否建议我在 app.component.html 模板中创建一个加载状态并使用它来呈现我的加载，请稍候？
能否分享您的项目文件夹或提供 GitHub 存储库链接，以便我查看