我有两个ListView和GridView按钮.为了在这两个按钮之间切换,我写了JQuery,如下所示 –
<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>
现在我想将此功能从Jquery移动到Angular2 typescript应用程序.任何人都可以指导我这个吗？如何在angular2模板上单击按钮时实现addClass和removeClass功能？
如果你想在component.ts中得到这个
HTML：
<button class="class1 class2" (click)="clicked($event)">Click me</button>
零件：
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
}
有关更多选项,示例和浏览器兼容性visit this link.