在 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 的样式 sheet 中提供样式并将其包含在 index.html 中，但不知何故它没有从该文件中获取样式.但是，在 header 或内联样式的标记中提供样式时，我得到了预期的行为。我错过了什么吗？

Answer 1

我假设 loading-state.css 参考已经在 index.html 页面的 head 标签中给出

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

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

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

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

})
class MyAppComponent {

}

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

Styling loading state before Angular2 app starts not working?

css

angular2-directives

angular2-template

angular2-styleguide

angular