Angular8.1.0基础---组件样式绑定
Posted jsxyz
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular8.1.0基础---组件样式绑定相关的知识,希望对你有一定的参考价值。
1,绑定一个class名
<p [class.isActive]="boolean">
p element works!
</p>
也可 <p [class.isActive]="fn()">
p element works!
</p>
fn()
return boolean
2,绑定多个class名 (ngClass)
<span [ngClass]="classObj">
this is span
</span>
classObj:Object=
className1:boolean,
className2:boolean
3,通过style绑定
<div [style.color]="boolean" ? ‘red‘ : ‘yellow‘ ">
this is div
</div>
4,绑定多个style(ngStyle)
<div [ngStyle]="styleObj ">
this is div
</div>
styleObj :Object=
‘font-style‘: boolean ? ‘italic‘ : ‘normal‘,
‘font-weight‘: boolean ? ‘bold‘ : ‘normal‘,
‘font-size‘:boolean ? ‘24px‘ : ‘12px‘
以上是关于Angular8.1.0基础---组件样式绑定的主要内容,如果未能解决你的问题,请参考以下文章