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

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

然而相反的切换之类的，当我点击按钮的页面被重新加载，而不是重定向和我到我的应用程序的主页。

来源

2017-02-27 lagfvu

所有其他条件相同，代码不应该有这种行为。（我希望否则，如果按钮是在一个窗体中，但它不是）。 – Quentin

你能告诉我们更多你的代码吗？ –

你要的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>

来源

2017-02-27 11:39:18

我刚试过这个，问题没有改变 – lagfvu

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

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

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

来源

2017-02-27 11:42:09

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

<button type="button"

看起来您的按钮位于表单内部并导致提交。

来源

2017-02-27 11:42:21

我的按钮不在任何形式 – lagfvu

然后你需要提供更多的信息。点击一个按钮不会重新加载页面，Angular也不会重新加载页面。 –

按钮内部除法或窗体大部分时间都具有加载页面的默认行为。出于这个原因，最好将按钮的类型属性设置为“buton”。

<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>

来源

2017-02-27 11:50:56 techhunter

这不适合我 – lagfvu

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

回答

相关问题