Question

如何在@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>

有没有办法让这种方法有效？

Answer 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，封装类型......任何其他很酷的事情）：

Answer 2

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

潜在的选择是：

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

Angular 2 @Component样式

2 个答案: