implementieren addClass und removeClass Funktionalität in angular2

Question

Ich habe paar Tasten für ListView und GridView. Zum Umschalten zwischen diesen zwei Tasten hatte ich JQuery geschrieben wie unten-

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button.switcher").bind("click", function (e) { 
      e.preventDefault(); 
      var theid = $(this).attr("id"); 
      var theitems = $("ul#items"); 
      var classNames = $(this).attr('class').split(' '); 
      if ($(this).hasClass("active")) { 
       // if currently clicked button has the active class 
       // then we do nothing! 
       return false; 
      } else { 
       // otherwise we are clicking on the inactive button 
       // and in the process of switching views! 
       if (theid == "gridview") { 
        $(this).addClass("active"); 
        $("#listview").removeClass("active"); 
        // remove the list view and change to grid 
        theitems.removeClass("tilelist"); 
        theitems.addClass("gridlist"); 
       } 

       else if (theid == "listview") { 
        $(this).addClass("active"); 
        $("#gridview").removeClass("active"); 
        // remove the grid view and change to list 
        theitems.removeClass("gridlist") 
        theitems.addClass("tilelist"); 
       } 
      } 

     }); 
    }); 
</script> 

Jetzt möchte ich diese Funktionalität von Jquery zu Angular2 Typoskript Anwendung bewegen. Kann mir bitte jemand dabei helfen? Wie implementiere ich die Funktionen addClass und removeClass beim Klicken auf die Schaltfläche aus der angular2-Vorlage?

Answer 1

Warum nicht einfach

<div [ngClass]="classes"> </div> 

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Answer 2

Versuchen Sie es mit ihm über [ngClass] Eigenschaft verwenden:

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}" 
     (click)="toggle(!isOn)"> 
     Click me! 
    </div>`, 

Answer 3

Wenn Sie wollen, dass diese

in component.ts zurückzuführen

HTML :

<button class="class1 class2" (click)="clicked($event)">Click me</button> 

Komponente:

clicked(event) { 
    event.target.classList.add('class3'); // To ADD 
    event.target.classList.remove('class1'); // To Remove 
    event.target.classList.contains('class2'); // To check 
    event.target.classList.toggle('class4'); // To toggle 
} 

Weitere Optionen, Beispiele und Browser-Kompatibilität visit this link.