属性指令是改变组件的外观或行为的一种方式。 理想情况下，指令应该以组件不可知的方式工作，而不是绑定到实现细节。
例如，Angular 2内置的属性指令ngClass和ngStyle，可以在任何组件或元素上工作。
NgStyle 指令
Angular 2提供了一个内置的指令ngStyle来修改组件或元素的style属性。这里有一个例子：
@Component({
selector: 'app-style-example',
template: `
<p style="padding: 1rem"
[ngStyle]="{
'color': 'red',
'font-weight': 'bold',
'borderBottom': borderStyle
}">
<ng-content></ng-content>
</p>
`
})
export class StyleExampleComponent {
borderStyle = '1px solid black';
}
请注意，绑定指令的方式与组件属性绑定完全相同。 这里，我们将一个表达式和一个对象字面量绑定到ngStyle指令，因此指令名称必须用方括号括起来。 ngStyle接受一个对象，其属性和值定义该元素的样式。 在这种情况下，我们可以看到，当指定style属性时，可以使用短横线式（kebab case）和小驼峰式（lower camel case）命名。 还要注意，在对元素进行样式设计时，HTML的style 属性和Angular ngStyle指令都是合并的。
我们可以将样式属性从模板中移除到组件中作为属性对象，然后使用属性绑定将其分配给NgStyle。 这允许对值的动态更改，而且让添加和删除样式属性更加灵活。
@Component({
selector: 'app-style-example',
template: `
<p style="padding: 1rem"
[ngStyle]="alertStyles">
<ng-content></ng-content>
</p>
`
})
export class StyleExampleComponent {
borderStyle = '1px solid black';
alertStyles = {
'color': 'red',
'font-weight': 'bold',
'borderBottom': this.borderStyle
};
}
NgClass 指令
ngClass指令更改绑定到其附加的组件或元素的class属性。有几种不同的方式使用指令。
绑定一个字符串
我们可以直接将一个字符串绑定到属性。这就像添加一个HTMLclass属性一样。
@Component({
selector: 'app-class-as-string',
template: `
<p ngClass="centered-text underlined" class="orange">
<ng-content></ng-content>
</p>
`,
styles: [`
.centered-text {
text-align: center;
}
.underlined {
border-bottom: 1px solid #ccc;
}
.orange {
color: orange;
}
`]
})
export class ClassAsStringComponent {
}
在这种情况下，我们直接绑定一个字符串，所以我们避免使用方括号包装指令。还要注意ngClass使用class属性来组合最终的类。
绑定一个数组
@Component({
selector: 'app-class-as-array',
template: `
<p [ngClass]="['warning', 'big']">
<ng-content></ng-content>
</p>
`,
styles: [`
.warning {
color: red;
font-weight: bold;
}
.big {
font-size: 1.2rem;
}
`]
})
export class ClassAsArrayComponent {
}
在这里，由于我们使用表达式绑定到ngClass指令，我们需要在方括号中包装指令名称。当你想有一个函数放在适用的类名列表时，传入数组是很有用的。
绑定一个对象
最后，一个对象可以绑定到指令。如果该属性为true，Angular 2将该对象的每个属性名称应用于组件。
@Component({
selector: 'app-class-as-object',
template: `
<p [ngClass]="{ card: true, dark: false, flat: flat }">
<ng-content></ng-content>
<br>
<button type="button" (click)="flat=!flat">Toggle Flat</button>
</p>
`,
styles: [`
.card {
border: 1px solid #eee;
padding: 1rem;
margin: 0.4rem;
font-family: sans-serif;
box-shadow: 2px 2px 2px #888888;
}
.dark {
background-color: #444;
border-color: #000;
color: #fff;
}
.flat {
box-shadow: none;
}
`]
})
export class ClassAsObjectComponent {
flat: boolean = true;
}
在这里我们可以看到，由于对象的card 和flat属性是true，这些classes将会生效，但由于dark是false，它不会生效。