Html 角度6：根据活动选项卡更改div的背景色

我想在

tab1

和

tab2

活动的基础上更改class

tabswitch

的背景色。我在Angular 6上做这个代码

<div class="tabswitch">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

表1
表2
b
一

表1
表2
b
一

---

为类tab1c和tab2c创建css要使用我的逻辑，您应该在组件中声明一个名为

activeTab

的变量，并将激活的选项卡名称保留在该变量内，然后您可以使用

[ngStyle]

指令来实现这一点

<div class="tabswitch" [ngStyle]="{'background-color': activeTab === 'tab1' ? 'green' : 'red' }">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

表1
表2
b
一

---

更多的例子是。

ng click指令是针对AngularJS的，这个问题是关于Angular6的。这不是一个正确的答案。

<div class="tabswitch" [ngStyle]="{'background-color': activeTab === 'tab1' ? 'green' : 'red' }">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>