Angular：仅在当前单击的按钮上切换活动类（不使用 \*ngFor）

Question

我想弄清楚如何 仅在单击的按钮 上切换 active 类：

这是我当前的代码…

 <div class="btn-group">
  <button class="btn btn-secondary" [ngClass]="{ 'active' : isActive }" (click)="isActive = !isActive" type="button">Premier bouton</button>
  <button class="btn btn-secondary" [ngClass]="{ 'active' : isActive }" (click)="isActive = !isActive" type="button">Second bouton</button>
  <button class="btn btn-secondary" [ngClass]="{ 'active' : isActive }" (click)="isActive = !isActive" type="button">Troisième bouton</button>
  <button class="btn btn-secondary" [ngClass]="{ 'active' : isActive }" (click)="isActive = !isActive" type="button">Quatrième bouton</button>
</div>

…这是结果：

我 不使用 *ngFor 或 ng-repeat 原则。我知道我需要 隔离 每个按钮。我怎样才能做到这一点？

添加 this. 到 isActive 不起作用： this.isActive 。

原文由 Jonathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

很简单，只需使用 Event Delegation 。

组件.html ：

 <div class="btn-group" (click)="onButtonGroupClick($event)">
  <button class="btn btn-secondary" type="button">Premier bouton</button>
  <button class="btn btn-secondary" type="button">Second bouton</button>
  <button class="btn btn-secondary" type="button">Troisième bouton</button>
  <button class="btn btn-secondary" type="button">Quatrième bouton</button>
</div>

组件.ts/.js ：

   onButtonGroupClick($event){
    let clickedElement = $event.target || $event.srcElement;

    if( clickedElement.nodeName === "BUTTON" ) {

      let isCertainButtonAlreadyActive = clickedElement.parentElement.querySelector(".active");
      // if a Button already has Class: .active
      if( isCertainButtonAlreadyActive ) {
        isCertainButtonAlreadyActive.classList.remove("active");
      }

      clickedElement.className += " active";
    }

  }

现场示例： https://plnkr.co/edit/EE4dOMgpY8QA2qZXjMiW ?p=preview

原文由 Marian07 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我只想为每个按钮使用一个唯一的字符串。例如：

 <div class="btn-group">
  <button class="btn btn-secondary" [class.active]="isActive('btn1')" (click)="setActive('btn1')" type="button">Premier bouton</button>
  <button class="btn btn-secondary" [class.active]="isActive('btn2')" (click)="setActive('btn2')" type="button">Second bouton</button>
  <button class="btn btn-secondary" [class.active]="isActive('btn3')" (click)="setActive('btn3')" type="button">Troisième bouton</button>
  <button class="btn btn-secondary" [class.active]="isActive('btn4')" (click)="setActive('btn4')" type="button">Quatrième bouton</button>
</div>

你的 setActive 和 Isactive 函数看起来像这样：

 this.setActive = function (buttonName){
  this.activeButton = buttonName;
}
this.isActive = function (buttonName){
  return this.activeButton === buttonName;
}

所以每个按钮都会传递它的名字，这只是一些独特的字符串。该字符串将保存为一个变量，并将用于确定是否应应用活动类。

您还会注意到您可以通过绑定到类名来切换各个类。就像我上面为活动类所做的那样，它可以与 [class.active] 绑定。

原文由 Niles Tanner 发布，翻译遵循 CC BY-SA 3.0 许可协议