如何防止 Angular 2 事件中的 PaginationComponent 工作？答案

【问题标题】：How to prevent PaginationComponent in Angular 2 event to work?如何防止 Angular 2 事件中的 PaginationComponent 工作？
【发布时间】：2019-10-16 05:09:16
【问题描述】：

我正在使用来自ngx-bootstrap/pagination 的pagination 组件。像这样：

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

我希望寻呼机在满足某些条件之前不导航到下一页，但找不到如何实现。

我尝试了几件事：

从pagination 组件中删除(pageChanged)="pageChanged($event)"。但导航仍在触发。
试图制作类似event.preventDefault() 的东西，但这里不存在

【问题讨论】：

标签： angular bootstrap-4 angular-bootstrap

【解决方案1】：

pageChange 是一个 EventEmitter，因此您可以在用户使用分页器更改页面时执行一个函数。所以它在那一刻已经改变了页面。

在 GitHub 上查看分页组件的the source code，发现有一个disabled Input-option。
也许你可以这样做：

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

那么你在这个disabled属性中引用的函数，可以检查多个条件。

【讨论】：

我想我不太明白你想要达到什么目的。我以为您想禁用导航，直到满足某些条件。我现在的印象是您正在尝试做其他事情；是否为分页添加属性。

【解决方案2】：

我发现解决这个问题的唯一方法是隐藏分页器组件，然后用一个按钮模拟满足条件时的分页点击，如下所示：

(<HTMLInputElement>document.querySelector('#next .pagination-next .page-link')).click();

棘手...丑陋...但有效:)

【讨论】：