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基础---组件样式绑定的主要内容,如果未能解决你的问题,请参考以下文章

15 Vue中子组件样式的绑定和行内样式模版编写

小程序基础

小程序基础

为啥我的 Vue 组件没有绑定样式?

小程序基础

小程序基础