Angular 组件样式
ngClass
通常情况下，要为某个元素添加指定样式，我们可以直接这样做：
<button class="btn btn-primary">提交</button>但某些时候我们需要根据不同的条件，为指定元素应用不同的样式。对于这种场景，我们可以使用属性绑定，如：
<button class="btn" [class.btn-primary]="true" type="submit">
提交
</button>但有时候，一个元素可能拥有多种状态样式，这时我们就可以使用 ngClass 指令。传递给 ngClass 指令的表达式的数据类型可以是：对象、数组或字符串。
接下来让我们来分别看一下具体的使用示例：
传递样式数组
<button [ngClass]="['btn', 'btn-primary']">提交</button>Angular 将会接收传递给 ngClass 指令的样式数组，然后把对应的样式应用到指定的元素上。下面是最终显示结果：
<button class="btn btn-primary">提交</button>传递字符串
<button [ngClass]="'btn btn-primary'" type="submit" (click)="submit()">
提交
</button>传递样式配置对象
<button [ngClass]="{ btn: true, 'btn-primary': true }">
提交
</button>样式配置对象的键为样式类的名称，而对应的值是布尔值或布尔表达式，即用于表示是否应用对应的样式类。
ngClass 综合示例
@Component({
selector: 'app-root',
template: `
<button (click)="toggleState()">切换状态</button>
<button [ngClass]="calculateClasses()" (click)="submit()">
提交
</button>
`})
export class AppComponent {
stateFlag = false;
toggleState() {
this.stateFlag = !this.stateFlag;
}
submit() {
console.log('Button submitted');
}
calculateClasses() {
return {
btn: true,
'btn-primary': true,
'btn-extra-class': this.stateFlag
};
}
}ngStyle
传递样式对象
<button [ngStyle]="{background: 'red'}">提交</button>以下是最终的显示结果：
<button style="background: red">提交</button>类似于 ngClass 综合示例的使用方式，当 ngStyle 指令的配置对象过大，我们可以通过组件的方法来获取样式配置对象，比如：
<button [ngStyle]="calculateStyles()">提交</button>视图封装
Emulated
app.component.html
@Component({
selector: 'my-app',
styleUrls:['./app.component.css'],
template: `
<button class="red-button">Button</button>
`})
export class AppComponent {}app.component.css
.red-button {
background:red;
}以上代码成功运行后，页面生成的 HTML 结构：
<my-app _nghost-c12="" ng-version="6.0.0">
<button _ngcontent-c12="" class="red-button">按钮1</button>
</my-app>
<button class="red-button">按钮2</button>当你看到页面的显示结果，你可能会感到惊讶，按钮2 的背景颜色没有变成红色，这时我们来查看一下模板内红色按钮所应用的样式：
.red-button[_ngcontent-c12] {
background:red;
}除此之外，从页面生成的 HTML 结构，我们也发现了 _nghost-c12、_ngcontent-c12 这些奇怪的属性。
那么这些属性是什么呢，它们有什么用？为了弄清楚这些属性，我们再新建一个 BlueButtonComponent 组件，代码如下：
@Component({
selector: 'blue-button',
template: `
<h3>蓝色按钮组件</h3>
<button class="blue-button">蓝色按钮</button>
`,
styles: [`
.blue-button {
background:blue;
}
`]
})
export class BlueButtonComponent { }之后，我们在根组件中使用新建的 BlueButtonComponent 组件：
@Component({
selector: 'my-app',
styleUrls:['./app.component.css'],
template: `
<button class="red-button">红色按钮</button>
<blue-button></blue-button>
`})
export class AppComponent { }以上代码成功运行后，页面生成以下 HTML 代码：
<my-app _nghost-c17="" ng-version="6.0.0">
<button _ngcontent-c17="" class="red-button">红色按钮</button>
<blue-button _ngcontent-c17="" _nghost-c18="">
<h2 _ngcontent-c18="">蓝色按钮组件</h2>
<button _ngcontent-c18="" class="blue-button">蓝色按钮</button>
</blue-button>
</my-app>我们注意到 blue-button 元素，新增了 _nghost-c18 host 属性，另外也存在一个 _ngcontent-c17 属性。
host 元素与模板元素属性工作原理
- 当应用程序启动的时候，宿主元素将会拥有一个唯一的属性，该属性的值取决于组件的处理顺序，比如
_nghost-c0,_nghost-c1。 - 每个组件内的元素，将会应用唯一的属性，比如
_ngcontent-c0,_ngcontent-c1。
然而这些属性，是如何启动视图封装的作用呢？
/* Style 1 - a simple CSS style,
with low specificy and easilly overridable */
.blue-button {
background: blue;
}
/* Style 2 - a similar style, with a much higher
specificity and much harder to override */
.blue-button[_ngcontent-c1] {
background: blue;
}:host 伪类选择器
有些时候，我们只想为宿主元素设置某些样式，但却不想影响到宿主元素下的其它元素。这时我们可以使用 :host 选择器：
/* styles applied directly to the ap-root element only */
:host {
border: 2px solid dimgray;
display: block;
padding: 20px;
}通过 :host 选择器我们可以确保上面的样式只被应用到宿主元素上，:host 选择器在运行时会转换为以下样式：
<style>
[_nghost-c0] {
border: 2px solid dimgray;
display: block;
padding: 20px;
}
</style>此外 :host 选择器也可以结合其它的选择器，比如：
/* let's add another style to app.conmponent.css */
:host h2 {
color: red;
}以上样式在运行时，将生成以下样式：
<style>
....
[_nghost-c0] h2[_ngcontent-c0] {
color: red;
}
</style>很明显，特定的作用域相关的属性，也会被应用到嵌入的选择器上，从而确保样式只局部应用于特定的模板。但如果我们想要设置所有 h2 标签的元素呢，这里仍有对应的方法。
:: ng-deep 伪类选择器
:host ::ng-deep h2 {
color: red;
}以上样式在运行时，将生成以下样式：
[_nghost-c0] h2 {
color: red;
}:host-context 伪类选择器
:host-context 伪类选择器对于开发主题样式很有用，示例如下：
@Component({
selector: 'themeable-button',
template: `
<button class="btn btn-theme">可配主题按钮</button>
`,
styles: [`
:host-context(.red-theme) .btn-theme {
background: red;
}
:host-context(.blue-theme) .btn-theme {
background: blue;
}
`]
})
export class ThemeableButtonComponent { }ThemeableButtonComponent 的使用示例如下：
<div class="blue-theme">
<themeable-button></themeable-button>
</div>