angular - 如何在角度 4 中重置组件类的分页

Question

这是我的分页组件类

import { Component, Input, EventEmitter, Output } from '@angular/core';

    @Component({
        selector: 'my-pagination',
        templateUrl: './pagination.component.html',
        styleUrls: ['./pagination.component.css']
    })
    export class PaginationComponent {
        @Input() page: number;
        @Input() count: number;
        @Input() perPage: number;
        @Input() loading: boolean;
        @Input() pagesToShow: number;

        @Output() goPrev = new EventEmitter<boolean>();
        @Output() goNext = new EventEmitter<boolean>();
        @Output() goPage = new EventEmitter<number>();

        lastPageRefOld: number;
        lastPageNew: number;

        constructor() { }

        getMin(): number {
            return ((this.perPage * this.page) - this.perPage) + 1;
        }

        getMax(): number {
            let max = this.perPage * this.page;
            if (max > this.count) {
                max = this.count;
            }
            return max;
        }

        onPage(n: number): void {
            this.goPage.emit(n);
        }

        onPrev(): void {
            this.goPrev.emit(true);
        }

        onNext(next: boolean): void {
            this.goNext.emit(next);
        }

        totalPages(): number {
            return Math.ceil(this.count / this.perPage) || 0;
        }

        lastPage(): boolean {
            return this.perPage * this.page > this.count;
        }

        getPages(): number[] {
            const c = Math.ceil(this.count / this.perPage);
            const p = this.page || 1;
            const pagesToShow = this.pagesToShow || 9;
            const pages: number[] = [];
            pages.push(p);
            const times = pagesToShow - 1;
            for (let i = 0; i < times; i++) {
                if (pages.length < pagesToShow) {
                    if (Math.min.apply(null, pages) > 1) {
                        pages.push(Math.min.apply(null, pages) - 1);
                    }
                }
                if (pages.length < pagesToShow) {
                    if (Math.max.apply(null, pages) < c) {
                        pages.push(Math.max.apply(null, pages) + 1);
                    }
                }
            }
            pages.sort((a, b) => a - b);
            return pages;
        }
    }

这是我用于所有页面的分页html

<div class="pagination" *ngIf="count > 0">
<div>
    <span class="page-totals"> {{ page }} of {{ totalPages() }} page</span>
</div>
<div class="numbers">
    <!--<button class="button-pages" (click)="onPage(1)" [hidden]="page === 1 || loading" [ngClass]="{ 'disabled': page === 1 || loading }">First</button>-->
    <button class="button-pages" (click)="onPrev()" [hidden]="page === 1 || loading" [ngClass]="{ 'disabled': page === 1 || loading }">&lt; Previous</button>
    <button class="button-pages" *ngFor="let pageNum of getPages()"
            (click)="onPage(pageNum)"
            [ngClass]="{'active': pageNum === page, 'disabled': loading}">
        {{ pageNum }}
    </button>
    <!--<button class="button-pages"
            (click)="onPage(pageNum + 5)"
            [ngClass]="{'active': pageNum + 5, 'disabled': loading}">
        ...
    </button>-->
    <button class="button-pages" (click)="onNext(true)" [disabled]="lastPage() || loading" [ngClass]="{ 'disabled': lastPage() || loading }">Next &gt;</button>
    <!--<button class="button-pages" (click)="onPage(getMax())" [hidden]="lastPage(getMax()) || loading" [ngClass]="{ 'disabled': lastPage() || loading }">Last</button>-->
</div>

这就是我如何在我的页面上调用分页。

<my-pagination (goPage)="goToPage($event)"
                                   (goNext)="onNext()"
                                   (goPrev)="onPrev()"
                                   [pagesToShow]="10"
                                   [page]="page"
                                   [perPage]="limit"
                                   [count]="total"></my-pagination>

每当在我的搜索栏上搜索时，我都会遇到重置到默认页面 1 的问题。如果我将单击搜索按钮并显示新的数据集，如何重置此分页？

标签： angularpagination