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

Answer 2

你可以通过仅修改你的html代码实现这一点，而且更多的是它也是角度2标准。

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

More Info

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

2 个答案: