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?
tarayıcı uyumluluk için
Bu konuda farkında değildi. Bu seçeneği deneyebilirsiniz. Teşekkürler :) –
Ayrıca, tek sınıflar için '[class.someClass] =" someBooleanExpressino "' vardır. http://angular.io'nun çok sayıda harika dokümanı var. –