2016-08-04 27 views
8

ListView ve GridView için birkaç düğmem var. Bu 2 düğmeler arasında geçiş için ben uygulamak addClass ve removeClass işlevselliği angular2 içinde

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

Şimdi Angular2 typescript uygulamaya jQuery gelen bu işlevi taşımak istediğiniz aşağıda- gibi JQuery yazmıştı. Bu konuda bana rehberlik eden var mı? Angular2 şablonundan buton tıklatıldığında addClass ve removeClass işlevlerini nasıl uygularım?

cevap

6

sadece [ngClass] özellik aracılığıyla kullanmak için

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

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

+0

tarayıcı uyumluluk için

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 } 

Bu konuda farkında değildi. Bu seçeneği deneyebilirsiniz. Teşekkürler :) –

+1

Ayrıca, tek sınıflar için '[class.someClass] =" someBooleanExpressino "' vardır. http://angular.io'nun çok sayıda harika dokümanı var. –

9

deneyin kullanmayan Neden:

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

Eğer component.ts bu nedeniyle istiyorsanız

HTML :

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

Bileşen: Daha fazla seçenek, örnekler ve visit this link.