angular [ngStyle]和[ngClass]的用法 （举例）

举个栗子：
利用数学的随机数函数，来获取在线/离线状态，分别给这两种状态添加样式

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.在线状态 背景绿色 字体为设置颜色 默认黑色