时间戳

首页 > 解决方案 > 应用程序根标签内的 Angular 代码样式不正确

html - 应用程序根标签内的 Angular 代码样式不正确

问题描述

初始化时，我的 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>

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

实际结果：

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

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

标签： htmlcssangularbootstrap-4initialization

解决方案

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

希望这可以帮助你

推荐阅读