How to set active " - Klasse auf der Liste der Schaltflächen

Ich habe eine Winkel 2 Anwendung, die eine Komponente enthält eine Liste der filter-Tasten.
Einer von Ihnen kann aktiv zu jeder Zeit.
Die Schaltfläche Definitionen kommen von einigen json und wird eines Tages vom server gesendet.

Mein problem ist, wie man einen Stil in der aktuellen Schaltfläche.
Sollte ich es einstellen im click-event-handler? So wie ich weiß, auf welche Schaltfläche geklickt wurde?

Meine Komponente sieht wie folgt aus :

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

}

Und meine HTML sieht wie folgt aus :

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

Was ist der häufigste Muster für diese?

InformationsquelleAutor Ben Cameron | 2016-07-26

  1. 18

    Dem Allgemeinen Muster wird eine neue variable erstellen, um zu verfolgen, auf welche Schaltfläche geklickt wird, weisen Sie diese variable auf ein click-Ereignis, und binden die aktive Klasse auf ob oder nicht der aktuellen Schaltfläche entspricht der Schaltfläche ausgewählte.

    Aus der Eckige 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; }
}
    Hervorragend, das funktioniert gut. Danke.

    InformationsquelleAutor Pace

  2. 3

    Zu diesem Zweck können Sie nur ändern Sie Ihre html-code und mehr über es ist eckig 2-standard.

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

    Mehr Info

    Dies brachte mich zu, wo ich sein musste. Ich kam zu dieser Seite zu haben, die Frage beantworten <button>, nicht <li>. So, obwohl die ausgewählte Antwort beantwortet die Frage am besten finde ich DIESE Antwort Antworten, die das Thema der post am besten.

    InformationsquelleAutor Prashobh

Schreibe einen Kommentar