Angular 2 @Component 样式答案

【问题标题】：Angular 2 @Component StylesAngular 2 @Component 样式
【发布时间】：2016-06-26 09:08:07
【问题描述】：

如何在 @Component 中使用 Angular 2 样式以及同一标签上的多个类？

@Component({
    styles: `.class1 .class2{background-color:red;}`
})

这会生成以下 css 代码：

.class1[<RANDOM_ANGULAR_ATTR>] .class2[<RANDOM_ANGULAR_ATTR>]{
    background-color: red; 
}

这不会选择这样定义的标签：

<div class=".class1 .class2" RANDOM_ANGULAR_ATTR></div>

有什么方法可以使这种方法奏效吗？

【问题讨论】：

标签： css typescript angular

【解决方案1】：

你的样式应该有类，它们之间没有空格。同一个选择器中的多个类必须直接写在一个之后——没有空格。例如：

.class1.class2 { background-color:red; }

为了选择你的对象，你应该像这样添加类：

<div class="class1 class2">Test css</div>

请看下面的代码：

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

@Component({
  selector: 'my-app',
  styles: [
`
.class1.class2{background-color:red};
` ],
  template: `
<h1>My First Angular 2 App</h1>
<div class="class1 class2">Test css</div>
`
})
export class AppComponent { }

有关更多选项，另请参阅以下博客文章（关于 Shadow DOM、封装类型.. 任何其他很酷的东西）：

【讨论】：

非常感谢！删除空格确实对我有用！

【解决方案2】：

您是否看过 Justin Schwartzenberger 关于 CSS 样式和随机生成标签的 NG-Conf 演讲？ https://www.youtube.com/watch?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&v=J5Bvy4KhIs0

可能的选择是：

使用 styleUrls 模板
改变封装
使用不同的类（因为它只与这个组件相关，所以可以简单地命名而不是使用 2）

【讨论】：