Angular2應用程序跳到頁面頂部的點擊事件

我遇到了一個Angular2應用程序問題，當我從視圖中點擊事件時，頁面跳轉到DOM的頂部。我試圖用事件方法的'preventDefault（）'綁定來阻止這種情況發生，但這並不能解決我的問題。任何人都可以告訴我你的這一切正在發生嗎？Angular2應用程序跳到頁面頂部的點擊事件

這裏是我的code.The觀點：

<div class='pagination-wrapper'> 
    <a class='page-link prev' [ngClass]="{'disabled': activePage <= 0}" (click)=pageBackward($event)>prev</a> 
    <a *ngFor='let pageLink of pages' class='page-link' [ngClass]="{'selected': activePage === pageLink}" (click)=jumpToPage(pageLink)>{{ pageLink + 1 }}</a> 
    <a class='page-link next' [ngClass]="{'disabled': activePage + 1 >= pages.length}" (click)=pageForward($event)>next</a> 
</div>

及相關組件代碼：

pageForward($event) { 
    $event.preventDefault(); 
    this.activePage++; 
    this.paginationChange.emit(this.activePage); 
} 

pageBackward($event) { 
    $event.preventDefault(); 
    this.activePage--; 
    this.paginationChange.emit(this.activePage); 
} 

jumpToPage(pageNum) { 
    this.activePage = pageNum; 
    this.paginationChange.emit(pageNum); 
}

謝謝！

來源

2017-01-11 devoncrazylegs

'paginationChange.emit（...）是什麼造成的？它是否有一些路由器本土化？ –

哪個鏈接導致它？ –

paginationChange.emit方法通過EventEmitter將整數傳遞給父組件。 – devoncrazylegs

你應該寫：

在HTML：

<a href="#" (click)="someMethod($event)"></a>

，並在打字稿文件：

someMethod(event: any) { 
    event.preventDefault(); 
    //some code 
}

您在打字稿方法使用$字符不必要的。這會導致某些瀏覽器出現錯誤（Firefox f.e.）。另外你不要在last method中使用event.preventDefault（）。

我希望能幫到你。

來源

2017-01-11 09:30:39

OP已經嘗試過了..檢查問題 –

此外，添加'href =「＃」'會導致Angular2路由問題。 – devoncrazylegs

@devoncrazylegs所以你可以告訴我，你使用的瀏覽器是？ –

Angular2應用程序跳到頁面頂部的點擊事件

回答

相關問題