Как повторно инициализировать текущую страницу с нумерацией страниц angular? - PullRequest
Новая
       17

Как повторно инициализировать текущую страницу с нумерацией страниц angular?

0 голосов
/ 07 апреля 2020

Я реализовал нумерацию страниц в angular приложении с этого сайта: Нумерация страниц

У меня есть два компонента для функции поиска. Первый родитель. Он содержит параметры поиска и кнопку, которая вызывает метод onSearch () . Второй - дочерний компонент с результатами поиска, отображаемыми в списке с нумерацией страниц. Вот как работает разбиение на страницы в дочернем компоненте: 

<tr *ngFor="let item of searchResults | paginate: { itemsPerPage: numberOfItemsPerPage, currentPage: p, id: 'searchResults' };
             index as i; let even=even; let odd=odd">
<td class="gridItemLeft">
                    <span class="label leftAlign">{{ i + 1 + (p-1)*numberOfItemsPerPage }}</span>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.id }}</span>
                </td>
                <td class="gridItemLeft">
                    <a [routerLink]="[getRouterLinkPage(item.requestType), item.id]">{{ item.typeName }}</a>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.date | date:'medium' }}</span>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.applicationUserUsername }}</span>
                </td>
            </tr>
...
<app-pagination-control (pageChange)="p = $event" autoHide="true" id="searchResults"></app-pagination-control>

Я создал этот класс: 

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from './template';
import { TranslateService } from '@ngx-translate/core';

function coerceToBoolean(input: string | boolean): boolean {
    return !!input && input !== 'false';
}

/**
 * The default pagination controls component. Actually just a default implementation of a custom template.
 */
@Component({
    selector: 'app-pagination-control',
    template: DEFAULT_TEMPLATE,
    styles: [DEFAULT_STYLES],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None
})
export class PaginationControlComponent {

    @Input() id: string;
    @Input() maxSize = 7;
    @Input()
    get directionLinks(): boolean {
        return this._directionLinks;
    }
    set directionLinks(value: boolean) {
        this._directionLinks = coerceToBoolean(value);
    }
    @Input()
    get autoHide(): boolean {
        return this._autoHide;
    }
    set autoHide(value: boolean) {
        this._autoHide = coerceToBoolean(value);
    }
    @Input()
    get responsive(): boolean {
        return this._responsive;
    }
    set responsive(value: boolean) {
        this._responsive = coerceToBoolean(value);
    }
    @Input() previousLabel = this.translateService.instant('Pagination.Previous');
    @Input() nextLabel = this.translateService.instant('Pagination.Next');
    @Input() screenReaderPaginationLabel = this.translateService.instant('Pagination.Pagination');
    @Input() screenReaderPageLabel = this.translateService.instant('Pagination.Page');
    @Input() screenReaderCurrentLabel = this.translateService.instant('Pagination.Current');
    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();

    constructor(
        private translateService: TranslateService
    ) {

    }

    private _directionLinks = true;
    private _autoHide = false;
    private _responsive = false;
}

p установлен в 1 в дочернем компоненте. При переходе на третью страницу возникает ошибка. Затем снова нажмите кнопку поиска. Я должен быть на первой странице, если новый поиск дал более одной страницы в наборе результатов, но он остается на третьей странице. p не реинициализируется. Мой вопрос заключается в том, как мне передать данные, чтобы установить currentPage на 1, когда происходит событие поиска?

Я попытался установить p в качестве элемента Input, установить его в методе onSearch на 1 и отправить его потомку следующим образом: 

<child-component [p]='p'></child-component>

1 Ответ

0 голосов
/ 08 апреля 2020

Я решил свою проблему, передав в качестве входных данных весь объект paginate и установив для свойства currentPage значение 1 при поиске.

...