如何在Angular中阻止ngx-bootstrap分页组件的页面切换事件生效？

我明白你的困扰——ngx-bootstrap的分页组件默认点击页码就会自动跳转，即使移除pageChanged绑定也没用，而且它的事件对象也没有preventDefault()方法可以直接阻止跳转。别担心，我们可以通过手动控制当前页的双向绑定来实现条件拦截。

核心思路 #

ngx-bootstrap的分页组件内部会维护currentPage状态，点击页码时会自动更新这个值。所以我们要做的是：

1. 通过双向绑定[(ngModel)]接管currentPage的控制权
2. 在pageChanged事件中先判断跳转条件，不满足就把currentPage重置回原来的页码

具体实现步骤 #

1. 在组件类中定义变量和判断方法

import { PageChangedEvent } from 'ngx-bootstrap/pagination';

// 当前页码，初始化为1
currentPage = 1;

// 自定义你的跳转条件判断方法，比如检查当前页内容是否填写完成
canNavigate(): boolean {
  // 这里替换成你实际的条件，比如表单验证、内容是否保存等
  return this.currentForm.valid && this.hasSavedCurrentContent;
}

2. 修改模板中的分页组件

给组件加上双向绑定[(ngModel)]="currentPage"，同时保留pageChanged事件绑定：

<pagination 
  *ngIf="returnedArray" 
  [totalItems]="contentArray.length" 
  (pageChanged)="handlePageChange($event)" 
  [itemsPerPage]="1" 
  [boundaryLinks]="false"
  [(ngModel)]="currentPage"
></pagination>

3. 实现分页变更的处理方法

在handlePageChange中先临时更新页码，然后判断条件，不满足就回滚：

handlePageChange(event: PageChangedEvent) {
  // 先保存跳转前的页码
  const previousPage = this.currentPage;
  // 先同步组件的页码变更
  this.currentPage = event.page;

  // 检查是否满足跳转条件
  if (!this.canNavigate()) {
    // 条件不满足，将页码重置回原来的页面
    this.currentPage = previousPage;
    // 这里可以给用户提示，比如弹窗或消息提示
    console.log('请先完成当前页的内容再进行跳转！');
  }
}

补充说明 #

这种方法的原理是：组件点击页码后会先更新currentPage，但我们可以在事件回调中把它改回原来的值，这样组件会重新渲染回之前的页码，看起来就像没有跳转一样。

如果想要优化视觉体验（避免点击后页码先高亮再回退的闪烁），可以额外给分页组件添加条件禁用：比如在不满足跳转条件时，给页码按钮添加disabled属性，这可以通过自定义分页模板来实现，但上面的方法已经能解决核心的功能问题啦。

内容的提问来源于stack exchange，提问作者Sonhja