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。

Answer 1

简单，只需使用Event Delegation。

<强> Component.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>

<强> Component.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

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]绑定。

Answer 3

你应该使用如下

clickedButton(event){console.log(event)
    let temp= event.srcElement.parentNode;
    for(let i = 0; i < temp.childNodes.length; i++){
      if(temp.childNodes[i].nodeName === 'BUTTON'){
      if(temp.childNodes[i].classList.contains('active')){
        temp.childNodes[i].classList.remove('active');
      }  }
    }
    event.srcElement.classList.add('active')

  }

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

<强> LIVE DEMO

Answer 4

您使用[ngClass]所做的事很好，但是问题出在您的（单击）事件上。当您单击同一按钮两次时，表达式 isActive =！isActive 给出错误。

因此，您可以在按钮的每个click事件上使用不同的方法集。

在您的 .ts 文件中，编写如下

isValue: number = 0;  // This is a class property. By initializing with a value, you can set the default button highlighted

toggle1() { this.isValue = 1; }
toggle2() { this.isValue = 2; }
toggle3() { this.isValue = 3; }
toggle4() { this.isValue = 4; }

在您的html文件中，进行如下更改，

<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 1 }" (click)="toggle1()" type="button">Premier bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 2 }" (click)="toggle2()" type="button">Second bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 3 }" (click)="toggle3()" type="button">Troisième bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 4 }" (click)="toggle4()" type="button">Quatrième bouton</button>

在这里，我仅更改了（单击）事件和[ngClass]。

Answer 5

你也可以这样做：

在您的 .ts 文件中

isValue: number = 0;

toggle(num) { this.isValue = num; }

并在您的 html 文件中更改如下

<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 1 }" (click)="toggle(1)" type="button">Premier bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 2 }" (click)="toggle(2)" type="button">Premier bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 3 }" (click)="toggle(3)" type="button">Premier bouton</button>
<button class="btn btn-secondary" [ngClass]="{ 'active' : isValue == 4 }" (click)="toggle(4)" type="button">Premier bouton</button>

并在您的 css 文件中更改如下：

.active { background-color: gray; }

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

5 个答案: