css - Angular2 应用程序开始之前的样式加载状态不起作用？

Question

在我的 index.html 中，我想在 Angular2 应用程序启动/引导之前向用户显示加载状态。

<my-app>
    <div class="sk-cubes">
      <div class="sk-cube1"></div>
      <div class="sk-cube2"></div>
    </div>
  </my-app>

我正在尝试在名为 loading-state.css 的样式表中提供样式并将其包含在 index.html 中，但不知何故它没有从该文件中获取样式。但是，在标题或内联样式中的标记中给出样式时，我得到了预期的行为。我错过了什么吗？

Answer 1

我假设在页面的标签中loading-state.css给出了参考headindex.html

在myapp组件中，设置ViewEncapsulation为none.

import {ViewEncapsulation} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'myapp',

  encapsulation: ViewEncapsulation.None   // <<<=====here

})
class MyAppComponent {

}