如何使用 angular 分頁重新初始化當前頁面？

Question

我在此站點的 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>

我創建了這個 class：

 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>

Answer 1

我通過將整個分頁 object 作為輸入並將 currentPage 屬性設置為 1 來解決我的問題。