如何在按钮列表上设置活动类

Question

我有一个Angular 2应用程序,其中包含一个包含过滤器按钮列表的组件.其中一个可以在任何时间激活.按钮定义来自某些json,有一天会从服务器发送.

我的问题是如何在当前单击的按钮上设置样式.我应该在click事件处理程序中设置它吗？那我怎么知道点击了哪个按钮？

我的组件看起来像这样:

import { Component, EventEmitter, Output }  from '@angular/core';

@Component({
    selector: 'tileFilter',
    template: require('./tileFilter.component.html'),
    styles: [require('.//tileFilter.component.scss').toString()]
})

export class TileFilterComponent {

@Output() onCategorySelected = new EventEmitter<number>();

public activeClass: string = "nonactive"

 private categories: any[] = [
    { "Id": 0, "Name": "All" },
    { "Id": 3, "Name": "Popup" },
    { "Id": 4, "Name": "Cafe" },
    { "Id": 5, "Name": "Pub or bar" },
    { "Id": 9, "Name": "Restaurant" }
];

    constructor() {}

    onClick(category:any){
        this.activeClass ="active";
        this.onCategorySelected.emit(<number>category.Id);
    }

}

我的HTML看起来像这样:

<ul class="tile-filters inline-list inline-list--sm unstyled-list collapse">
  <li *ngFor="let c of categories">
      <button class="button button--recede button--sm {{activeClass}}" (click)="onClick(c)">{{c.Name}}</button>
  </li>
</ul>

这种常见的模式是什么？

Answer 1

常见的模式是创建一个新变量来跟踪单击哪个按钮,在click事件上重新分配该变量,以及绑定活动类是否当前按钮等于所选按钮.

从Angular 2教程:

//...

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

//...

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero) { this.selectedHero = hero; }
}

Answer 2

您可以通过仅修改您的 html 代码来实现这一点，而且更多的是 angular 2 标准。

    <li *ngFor=" let c of categories ">
          <button [class.active]="clicked === c" 
             (click)="clicked = (clicked === c ? null :c)">{{c.Name}}</button>
    </li>

更多信息