按钮是刷新页面而不是调用函数答案

【问题标题】：button is refreshing page instead of calling function按钮是刷新页面而不是调用函数
【发布时间】：2017-02-27 11:37:23
【问题描述】：

我有一个按钮，用于切换 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;
    }

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

【问题讨论】：

在其他条件相同的情况下，该代码不应具有该行为。（如果按钮在表单中，我希望否则，但它不是）。
您能向我们展示更多您的代码吗？

标签： javascript angular

【解决方案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>

【讨论】：

但仍会重定向到主页？你能展示更多你的代码吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

<button type="button"

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

【讨论】：

我的按钮不在任何表单中
那么您需要提供更多信息。单击按钮不会重新加载页面，Angular 也不会重新加载页面。

【解决方案4】：

大多数情况下，分部或窗体内的按钮具有加载页面的默认行为。因此，最好将按钮的类型属性设置为“按钮”。

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

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

<script>
isActive: boolean = true;

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

【讨论】：