Angular2 |如何addClass與removeClass具體爲（點擊div元素激活的className）股利

Question

## Note: ## 

的onclick我想使這是點擊類的名稱。

like eg：$（'div [data-index ='0.0']'）。addClass（'selected'）;在jquery // addClass只對指定的div有data-index = 0.0。

我不想讓它在點擊時啓用所有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>