与angular4和jQuery分页

Question

我尝试在angular 4和jquery中应用分页，但是单击下一步按钮时出现错误，它先移动前2页，然后再移动3页，然后再移动5页（单击时）。

代码部分：

addClass(x) {
  $(".page-item").click(function () {
    $(this).addClass("current").siblings().removeClass('current');
  });
}

next() {
  $('.next').click(function () {
    $('.current').next('li').trigger('click');
  });
}

代码html：

<ul>
  <li class="previous">Previous</li>
  <li class="next" (click)="next()">Next</li>
</ul>

<ul class="pagination">
  <li *ngFor="let x of pages" class='page-item current' 
      (click)='addClass(x)'>{{x}}</li>
</ul>

例如，当我单击第5页时添加当前类，但当前错误类将其移动，第一单击将移动2页，然后单击将其移动其他3页，然后单击将移动5页

Answer 1

您已经在HTML模板中绑定了click事件：

<li class="next" (click)="next()">Next</li>

并且在您的组件中，每次点击都会添加一个新的click处理程序：

next()
{
   $('.next').click(function(){
     $('.current').next('li').trigger('click');
   });
}

因此，您实际要做的只是中继单击方法，而不是添加新的处理程序：

next()
{
   $('.current').next('li').trigger('click');
}