Angular2 应用程序在点击事件时跳转到页面顶部

Question

我在构建的 Angular2 应用程序上遇到了问题，当我从视图中触发单击事件时，页面会跳转到 DOM 的顶部。我试图使用"preventDefault（）"绑定到事件方法来阻止这种情况发生，但这并不能解决我的问题。 谁能告诉我你正在发生的事情？

这是我的代码。观点：

<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);
}

谢谢！

Answer 1

你应该写：

在 html 中：

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

并在 TypeScript 文件中：

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

您在打字稿的方法中不必要地使用了 $ 字符。这会导致某些浏览器（Firefox f.e.）出错。此外，您不会在最后一个方法中使用 event.preventDefault（）。

我希望对您有所帮助。

Answer 2

您还可以

使用 href 属性来防止页面跳转，如下所示：

<a href="javascript:void(0);" (click)="someMethod($event)"></a>