Angular2 |どのようにaddClassするとremoveClassは、具体的にはdiv要素の

Question

## Note: ## 

にOnclickは私がクリックされたクラス名を有効にしようとしています（クラス名をアクティブにするのdiv要素をクリックしました）。

例：$（ 'div [data-index =' 0.0 ']'）。addClass（ 'selected'）; JQueryで// data-index = 0.0の指定されたdivにのみaddClassを追加します。

私はクリックするとすべてのclassNameを有効にしたくありません。特定のクラス名 を有効にする ユニークな方法は、私は事前に、具体的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. 
     } 

    } 

おかげで答えを求めています。!!

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

ここでこのディレクティブは、あなたが探しているものやり過ぎのビットを達成しますが、物事の「角度の道」へとあなたをシフトするのに役立ちます。

上記のディレクティブを使用するには、このディレクティブで上記の要素を調整してください。

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