Question

我有一个按钮，用于在div上切换一个类来打开和关闭侧边菜单。

<div id="body-holder" [ngClass]="{'show-nav':isActive}">
    <div class="site-wrap">
    <button class="toggle-nav" (click)="flipper()">
        <i class="fa fa-bars" aria-hidden="true" ></i>
    </button>
</div>
</div>

在我的component.ts文件中，我有以下代码。

isActive: boolean = true;

    flipper()
    {
        this.isActive = !this.isActive;
    }

然而，当我单击按钮时，不是切换类，而是重新加载页面并重定向到我的应用程序主页。

Answer 1

您必须以这种方式为您的点击事件添加preventDefault：

flipper(event: any)
    {
        event.preventDefault();
        this.isActive = !this.isActive;
    }

并在您的HTML代码中：

<button class="toggle-nav" type="button" (click)="flipper($event)">
        <i class="fa fa-bars" aria-hidden="true" ></i>
</button>

Answer 2

将按钮类型属性设置为type="button"：

   <button type="button" class="toggle-nav" (click)="flipper()">
        <i class="fa fa-bars" aria-hidden="true" ></i>
    </button>

Answer 3

将按钮类型设置为type="button"也可能解决问题

<button type="button"

您的按钮似乎在表单中并导致提交。

Answer 4

按钮内部分区或表单大部分时间都有加载页面的默认行为。因此，最好将按钮的type属性设置为“buton”。

<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>

我认为功能有误。在定义函数之前，您错过了提及“funtion”关键字。我尝试了一个样本小提琴：here

<script>
isActive: boolean = true;

   function flipper()
    {
       alert("a");
    }
</script>

按钮是刷新页面而不是调用功能

4 个答案: