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

Question

下面是标记

<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> 

颜色永久为 Angular 任何颜色。我已经完成了鼠标悬停时更改背景颜色的操作，但我希望单击时更改背景颜色。

Answer 1

使用@HostListener

我已经在 Stackblitz 上创建了一个演示

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

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