angular - 如何在按钮列表上设置事件类

Question

我有一个 Angular 2 应用程序，它有一个包含过滤器按钮列表的组件。 其中之一可以随时激活。 按钮定义来自一些 json 并且有一天会从服务器发送。

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

我的组件是这样的:

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

常见的模式是创建一个新变量来跟踪单击了哪个按钮，在单击事件时重新分配该变量，并根据当前按钮是否等于所选按钮来绑定(bind)事件类。

来自Angular 2 tutorial :

//...

<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; }
}