Как предотвратить PaginationComponent в событии Agular 2 для работы?

Question

Я использую pagination компонент, полученный из ngx-bootstrap/pagination.Например:

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

Я хочу, чтобы пейджер не переходил на следующую страницу, пока не будут выполнены некоторые условия, но не могу найти, как этого добиться.

Я попробовал несколько вещей:

1. Удалите (pageChanged)="pageChanged($event)" из компонента pagination.Но навигация все еще срабатывает.
2. Пытался сделать что-то вроде event.preventDefault(), но здесь его не существует

... :(

Любая идея окак сделать так, чтобы компонент разбивки на страницы не был угловатым для навигации? Спасибо!

Answer 1

Единственный способ, который я нашел, чтобы решить эту проблему, это скрыть компонент пагинатора, а затем с помощью кнопки смоделировать щелчок по нумерации страниц при соблюдении условий, например:

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

Хитрый ... некрасивый ... но сработал:)

Answer 2

pageChange является EventEmitter, поэтому вы можете выполнить функцию, когда пользователь изменил страницу с помощью paginator.Так что это уже изменило страницу в тот момент.

Глядя на исходный код компонента нумерации страниц на GitHub, я вижу, что есть disabled опция ввода.
Может быть, вы можете сделать что-то вроде:

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

Тогда функция, на которую вы ссылаетесь в этом атрибуте disabled, может проверять наличие нескольких условий.