Question

我在构建的Angular2应用程序上遇到了一个问题，当我从视图中触发click事件时，页面跳转到DOM的顶部。我试过使用＆＃39; preventDefault（）＆＃39;绑定到事件方法以阻止这种情况发生，但这不能解决我的问题。任何人都可以告诉我你的这种情况正在发生吗？

这是我的代码。观点：

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

Angular2应用程序在点击事件

2 个答案: