时间戳

首页 > 解决方案 > 如何在角度 6 中单击时更改 div 背景颜色

angular - 如何在角度 6 中单击时更改 div 背景颜色

问题描述

下面是标记

<mat-card class="example-card" *ngFor="let filteredScreen of 
        filteredScreens"  let i = index >

      <mat-card-header>
          <div mat-card-avatar class="example-header-image" >
              <img mat-card-image class="list-img" src=" 
                {{filteredScreen?.img}}" >
          </div>
            <mat-card-content class="names" [innerHTML]="filteredScreen.name 
              | highlight: name"  >{{ 
                    filteredScreen?.name }}
           </mat-card-content>
      </mat-card-header>
    </mat-card>

我怎样才能改变

    <mat-card>

鼠标单击（不是鼠标悬停）时的背景颜色为任何颜色，以及

     <mat-card-content>

颜色到任何颜色的角度永久。我已经在鼠标悬停时更改了背景颜色，但我希望在点击时使用它。

标签： angularangular6

解决方案

利用@HostListener

我在Stackblitz上创建了一个演示

@HostListener('click') onMouseClick() {
    this.highlight(this.highlightColor || 'red');   
}

 private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;   
 }

推荐阅读