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

发布时间：2020-12-17 18:02:02 所属栏目：安全来源：网络整理

导读：我有一个Angular 2应用程序,其中包含一个包含过滤器按钮列表的组件. 其中一个可以在任何时间激活. 按钮定义来自某些json,有一天会从服务器发送. 我的问题是如何在当前单击的按钮上设置样式. 我应该在click事件处理程序中设置它吗？那我怎么知道点击了哪个按

我有一个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>

这种常见的模式是什么？

解决方法

常见的模式是创建一个新变量来跟踪单击哪个按钮,在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; }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!