问题：怎么在HTML中，或者使用事件控制样式

HTML中

<div class="ov" [class.change_color]="changecolor">
 <button (mouseover)="selectBackcolordown()" (mouseout)="selectBackcolorup()" [matMenuTriggerFor]="menu"> </button>

ts文件中写上

@Input() changecolor = false
selectBackcolordown(){
    this.changecolor = true
    console.log("mousedown")
  }
  selectBackcolorup(){
    this.changecolor = false
    console.log("mousedown")
  }

scss文件中：

.change_color{
    position: relative;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    border-right: 1px solid rgba(97, 75, 194, 0.15);
    background-image: url("../../../../assets/nva.png");
    background-size:  18px;    
    background-repeat: no-repeat;
    background-position: 18px;
    background-color: rgb(50, 41, 172);
}

解析：
HTML中的[class.change_color]="changecolor",获取class中的change_color样式，是否使用该样式，取决于后台changecolor的值（true或者false），在下面使用鼠标事件改变改值。从而实现动态修改样式