举个栗子:
利用数学的随机数函数,来获取在线/离线状态,分别给这两种状态添加样式
ts文件
export class MyownComponent{
state:string="离线";
contructor(){
this.state=Math.random()>0.5? "离线":"在线"
}
Getstate(){
return state;//返回上面得到的状态 不能在上面的函数中写return 会报错
}
getStyle(){
//这个函数用来设置不同状态下的样式
return this.state==="离线"? "gray":"green"//离线状态为灰色 否则为绿色
}
}
html文件:
<p [ngStyle]="{'backgroundColor':getStyle()}" [ngClass]="{aaa:state==="离线"}">测试文字</p>
//aaa是自己新创建的类,用于设置样式
//可在css页面写样式.aaa{color:white};若为离线状态,字体为白色
效果:
1.离线状态 背景红色 字体为类aaa设置的白色
2.在线状态 背景绿色 字体为设置颜色 默认黑色