Angular2：样式化“正在加载..”元素答案

【问题标题】：Angular2: Styling the 'loading..' elementAngular2：样式化“正在加载..”元素
【发布时间】：2016-05-17 01:25:46
【问题描述】：

我正在尝试设置根组件的样式，特别是应用引导时显示的“正在加载..”内容。我知道我可以在index.html 中加载样式表并访问我在<my-app> 选择器中添加的类。不过，我认为这可以通过在根应用程序类的 @Component 装饰器中分配的样式来完成。

我创建了一个 plunker here。问题是，如何使用基于组件的样式设置 loading... 消息的样式（例如，将文本颜色更改为红色）？

谢谢。

【问题讨论】：

标签： angular

【解决方案1】：

改变

<div .primary>

到

<div class="primary">

然后在你的 style.css 中添加以下内容：

.primary {
   color: red;
}

这将在每次显示时将“正在加载...”文本更改为红色。我认为这是实现这一点的最佳方法，而不是在组件中使用样式或 styleUrls，而这些样式或 styleUrls 仅适用于它被调用的组件。

希望这会有所帮助！

【讨论】：

【解决方案2】：

更新了您的plunker，不确定您所说的基于组件的样式是什么意思？

   .primary{
      font-size: 20px;
      color: red;
    }

    <div class="primary" >loading...</div>

【讨论】：