Angular2 | Wie man AddClass und removeClass speziell (geklickt div Element der Klassenname aktivieren)

Question

## Note: ## 

Onclick von div Ich versuche, den Klassennamen zu ermöglichen, die angeklickt wurde.

wie zB: $ ('div [datenindex =' 0.0 ']'). AddClass ('selected'); in Jquery // addClass nur zu dem angegebenen div mit dem Datenindex = 0.0.

Ich möchte nicht will alles auf classname Klick aktivieren. Einzigartige Weise spezifische Klassennamen ermöglicht Ich möchte die Antwort speziell in angular2

## Template: ## 
    <div class="board"> 
      <div class="matrix selected" data-index="0-0" [ngClass]="{selected:isCellSelected}" (click)="fireClickEvent(0-0)"> 
      </div> 
      <div class="matrix selected" data-index="0-1" [ngClass]="{selected:isCellSelected}" (click)="fireClickEvent(0-1)"> 
      </div> 
      <div class="matrix selected" data-index="1-0" [ngClass]="{selected:isCellSelected}" (click)="fireClickEvent(1-0)"> 
      </div> 
      <div class="matrix selected" data-index="1-1" [ngClass]="{selected:isCellSelected}" (click)="fireClickEvent(1-1)"> 
      </div> 
    </div> 

    ## component ## 
    import { Component, OnInit} from '@angular/core'; 

    @Component({ 
     selector: 'app' 
    }) 
    export class displayComponent implements OnInit { 

     isCellSelected :boolean ; 

     constructor() { 
     } 

     ngOnInit() { 
     } 

     fireClickEvent(clickedCell) { 
      const selectedCellIndex = clickedCell; 
      this.isCellSelected = true; // enabling className for all three 
      // I need only clicked cell to activate the className Not all. 
     } 

    } 

Vielen Dank im Voraus. !!

Answer 1

@Directive({ 
    selector: '[selectable]' 
}) 
export class MatrixDirective { 
    @HostBinding('class') 
    classes = ''; 

    @Input('selectableClass') 
    toggleClass = 'selected'; 

    @HostListener('click') 
    fireClickEvent() { 
    if(this.classes.indexOf(this.toggleClass) > -1) { 
    this.classes = this.classes.replace(this.toggleClass, ''); 
    } else { 
     this.classes = `${this.classes} ${this.toggleClass}`; 
    } 
}; 
} 

hier wird diese Richtlinie erreichen, was Sie ein bisschen übertrieben suchen, für, wird aber helfen, in den „Winkel Art und Weise“ shift, Dinge zu tun.

Um die obige Direktive zu verwenden, passen Sie einfach Ihre Elemente oben mit dieser Direktive an.

<!-- OLD --> 
<div class="matrix selected" data-index="0-0" [ngClass]="{selected:isCellSelected}" (click)="fireClickEvent(0-0)"> 
     </div> 
<!-- Adjusted --> 
<div class="matrix" data-index="0-0" selectable> 
     </div>