Ngclass
单一类增删的最佳方式是使用css类绑定
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
多个类增删则最好使用NgClass指令
<div [ngClass]="setClasses()">This div is saveable and special</div>
在组件方法中设置一个对象来管理各个css类的状态
setClasses() {
let classes = {
saveable: this.canSave, // true
modified: !this.isUnchanged, // false
special: this.isSpecial, // true
};
return classes;
}
同样样式绑定是设置单一样式值的简单方式。
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large.
</div>
若要设置多个内联样式,NgStyle
指令可能是更好的选择
<div [ngStyle]="setStyles()">
This div is italic, normal weight, and extra large (24px).
</div>
在组件方法中设置一个对象来管理
setStyles() {
let styles = {
// CSS property names
'font-style': this.canSave ? 'italic' : 'normal', // italic
'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
'font-size': this.isSpecial ? '24px' : '8px', // 24px
};
return styles;
}