typescript – 在angular2中实现addClass和removeClass功能

发布时间：2020-12-17 07:55:17 所属栏目：安全来源：网络整理

导读：我有两个ListView和GridView按钮.为了在这两个按钮之间切换,我写了JQuery,如下所示 – script type="text/javascript" $(document).ready(function () { $("button.switcher").bind("click",function (e) { e.preventDefault(); var theid = $(this).attr("i

我有两个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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!