Angular分页组件点击上下页按钮无法更新页面数据求助

架构老林

2026-6-24

问题排查与解决

你的分页组件无法获取对应页面数据，核心问题有三个：父组件未引入分页组件、未监听分页的页码变更事件、子组件错误修改@Input属性。以下是具体修复步骤：

1. 父组件模板引入分页组件并绑定参数

在父组件的模板末尾添加分页组件，绑定输入参数（总条数、每页数量、当前页码），并监听pageChanged事件：

<!-- 现有产品列表代码 -->
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-x-3 md:gap-x-5 xl:gap-x-7 gap-y-4 lg:gap-y-5 xl:gap-y-6 2xl:gap-y-8">
    <div *ngFor="let product of products">
        <app-product-item [product]="product"></app-product-item>
    </div>
</div>

<!-- 添加分页组件 -->
<app-pagination 
    [totalCount]="totalCount"
    [pageSize]="shopParams.pageSize"
    [pageNumber]="shopParams.pageIndex"
    (pageChanged)="onPageChanged($event)"
></app-pagination>

2. 父组件实现页码变更处理方法

在ShopComponent中添加onPageChanged方法，更新分页参数并重新获取产品数据：

export class ShopComponent implements OnInit {
    // 现有代码...

    onPageChanged(pageNumber: number) {
        this.shopParams.pageIndex = pageNumber;
        this.getProducts();
    }
}

3. 修正分页组件的错误逻辑

分页组件中，pageNumber是@Input属性，子组件不应该直接修改它，应该由父组件传递最新值。修改changePage方法，移除对子组件pageNumber的赋值：

export class PaginationComponent {
    // 现有输入输出属性...

    changePage(page: number): void {
        if (page >= 1 && page <= this.totalPages) {
            // 移除 this.pageNumber = page; 这行代码
            this.pageChanged.emit(page);
        }
    }
}