按鈕是刷新頁面而不是調用功能

我有一個按鈕用於切換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

按鈕是刷新頁面而不是調用功能

回答

相關問題