angular样式

Style

  一、通过 ngStyle

1 <p [ngStyle]="{'color':'red'}">ngStyle演示</p>
2 
3 <p [ngStyle]="{'color':tempColor}">ngStyle演示</p>
4 // tempColor定义在ts文件中,数据类型为字符串,值为color的属性值

  二、[style.属性]="bool"

<p [style.yellow]="true">test</p>

 Class

  一、通过ngClass

 1 <div [ngClass]="{'blue':true}">
 2   ngClass演示
 3 </div>
 4 
 5 
 6 <ul>
 7   <li *ngFor="let item of tempList;let i=index" [ngClass]="{'red':(i % 2 ==0) ,'blue':i % 2 !==0}">
 8     {{i}}-------{{item}}
 9   </li>
10 </ul>

  二、[class.类]='bool'

<p [class.yellow]="true">test</p>
原文地址:https://www.cnblogs.com/wyjblog/p/15648409.html