如何在角度绑定样式

Question

我正在尝试使用以下样式突出显示给定项目中的选定项目，但是当我点击项目时突出显示所有项目，但是我只想突出显示选定项目可以帮助我一些 https://stackblitz.com/edit/angular-7wkrx1?file=src/app/app.component.html

.css

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: red;
}

.html

<div class="tab">
  <button class="tablinks" [class.active]="one" (click)="one=!one">London</button>
  <button class="tablinks" [class.active]="two" (click)="two=!two">Paris</button>
  <button class="tablinks" [class.active]="three" (click)="three=!three">Tokyo</button>
</div> 

Answer 1

一种解决方案是使用一个变量存储所选选项：

<div class="tab">
  <button class="tablinks" [class.active]="active == 'one'" (click)="active = 'one'">London</button>
  <button class="tablinks" [class.active]="active == 'two'" (click)="active = 'two'">Paris</button>
  <button class="tablinks" [class.active]="active == 'three'" (click)="active = 'three'">Tokyo</button>
</div> 

Answer 2

相反，使用ngClass，这在动态类绑定的情况下会更好。

<div class="tab">
  <button class="tablinks" [ngClass]='{"active": selected == "one"}' (click)="selected = 'one'">London</button>
  <button class="tablinks" [ngClass]='{"active": selected == "two"}' (click)="selected = 'two'">Paris</button>
  <button class="tablinks" [ngClass]='{"active": selected == "three"}' (click)="selected = 'three'">Tokyo</button>
</div> 

Working Example

PS：如果您有更多这样的选择，则应该使用ngSwitchCase的角度，这可能是一个有效的选择。

Answer 3

另一种方式，您可以通过打字稿逻辑来实现，

HTML：

<div class="tab">
  <button class="tablinks" [class.active]="one" (click)="function1()">London</button>
  <button class="tablinks" [class.active]="two" (click)="function2()">Paris</button>
  <button class="tablinks" [class.active]="three" (click)="function3()">Tokyo</button>
</div> 

.TS

  function1(){
    this.one=!this.one;
    this.two= this.three = false;
  }

   function2(){
    this.two=!this.two;
    this.one= this.three = false;
  }

   function3(){
    this.three=!this.three;
    this.one = this.two = false;
  }