当我们需要使“某物”具有排他性时，我们使用一个唯一变量

selectedIndex:number=-1

如果不想取消选中

<div class="oval" [class.selected]="selectedIndex==0"
                  (click)="selectedIndex=0">
    1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
                  (click)="selectedIndex=1">
    2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
                  (click)="selectedIndex=2">
    3
</div>

如果你想取消选择

<div class="oval" [class.selected]="selectedIndex==0"
                  (click)="selectedIndex=selectedIndex==0?-1:0">
    1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
                  (click)="selectedIndex=selectedIndex==1?-1:1">
    2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
                  (click)="selectedIndex=selectedIndex==2?-1:2">
    3
</div>

注意：我使用[class.selected]，因此我们使用.css

.selected{
   background:red;
}

您可以使用(condition)?value:null来使用style.background或style.background-color，例如，用于第一个div

[style.background]="selectedIndex==0?'red':null

就像@Kwright02的评论一样，你可以用css来做：

.myclass:focus {
  background-color: green;
}

但重要的是：元素必须是可聚焦的。所以div不是，按钮就是这样。
第二种方法（添加单击处理程序并直接更改背景）：

// HTML
<div (click)="onClick($event)">test</div>

// Code
onClick(event: any) {
    event.target.style["background-color"] = "green";
  }

注意：这不是Angular* 中的方法。这里使用属性绑定并将样式绑定到条件作为示例。

您可以像这样使用Angular的HostListener，而不是向每个控件添加一个click侦听器：

@HostListener("document:click", ["$event"])
  onAllClick(event: any) {
    event.target.style["background-color"] = "green";
  }