Angular 2：根据点击事件向元素添加ngClass

Question

I want Clicked class to be applied only to one clicked element at a time. Upon clicking other element the first clicked element should not have that class any more. It should be somewhat like this.clicked to that particular element.

  .rangeContainer{
    width: 100%;
    height: 46px;
    }
    .range{
      height: 42px;
      background-color: #F6F6F6;
      color: #035688;
      font-size: 12px;
      font-weight: 800;
      line-height: 46px;
      padding: 15px 20px;
      cursor: pointer;
    }
    .clicked{
      background-color: white;
      color: #7A232E;
      border-top: 6px solid #7A232E;
    }
  
I want the 

   
<div class="rangeContainer">
    <span (click)="click = !click" [ngClass]="{'clicked' : click}" class="range">K4 - K5</span>
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">1ST - 2ND</span>
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">3RD - 4TH</span>
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">5TH - 8TH</span>
</div>

- Asif Karim Bherani

Answer 1

<span
  *ngFor="let range of ['K4 - K5', '1ST - 2ND', '3RD - 4TH', '5TH - 8TH']; let i = index"
  (click)="activeIndex = i"
  [ngClass]="{ clicked : activeIndex === i }" class="range" >
  {{ range }}
</span>

Plunker Example

- yurzui

---

有没有一种方法可以在点击外部时停用该类？这将非常有帮助。 - Asif Karim Bherani

太棒了！如果您不介意，能否请您解释一下 $event.stopPropagation() 是什么，并且我可以在任何地方使用它吗？我已经使用了 (click)="function($event)"，但从未使用过 $event.stopPropagation()。 - Asif Karim Bherani

这段代码的问题在于它即使我点击外部区域，也不会停止监听主机事件。期望的效果是一旦点击元素外部就停止监听点击事件。我已经为您提供了HostListener的控制台语句，请参考https://plnkr.co/edit/3v3nFL?p=preview - Asif Karim Bherani

另一种方法是使用 Renderer https://plnkr.co/edit/u7Lwn6?p=preview - yurzui

我非常想这样做，但我至少需要15个声望点，而现在我只有12个，所以我无法...它确实解决了我的问题，一旦我达到15个声望点，我会给它点赞。 - Asif Karim Bherani

你好 @yurzui ，能帮我看看这个例子吗？在这个例子中，我想让默认情况下点击外部区域就取消选择，然后一旦取消选择就应该取消监听器。目前必须先点击菜单项才能检测到点击外部区域。请帮忙... plnkr.co/edit/lx9eBU?p=preview - Asif Karim Bherani

Answer 2

在组件中：

// Insert your real labels here
this.items = [{label: 'item 1'}, {label: 'item 2'}];

然后使用*ngFor：

<div class="rangeContainer">
    <span *ngFor="let item of items" (click)="toggleClick(item)" [ngClass]="{'clicked' :item.isClicked}" class="range">{{item.label}}</span>
</div>

然后像这样切换：

toggleClick(clickedItem: any): void {

  for (let item of items) {
    item.isClicked = false;
  }

  clickedItem.isClicked = true;
}

这将确保同时只有一个项目被点击。我使用循环来在对象上存储已点击状态，这使得生活更加轻松。

- Chrillewoodz