ngx-bootstrap 分页：实现精确的页码跳转控制-html教程-PHP中文网

ngx-bootstrap 分页：实现精确的页码跳转控制

本教程详细介绍了如何利用 ngx-bootstrap 的分页组件，通过一个输入框实现用户自定义页码跳转。核心在于通过 [(ngModel)] 将分页组件与组件内部的 currentPage 变量双向绑定，并结合输入框更新此变量，从而实现精确的页面导航控制，同时强调了输入验证的重要性。

1. ngx-bootstrap 分页组件基础

ngx-bootstrap 的分页组件 () 提供了一种便捷的方式来展示大量数据的分页导航。其基本用法涉及 [totalItems] (总条目数) 和 (pageChanged) (页码改变事件) 两个核心输入/输出属性。当用户点击分页组件中的页码时，pageChanged 事件会触发，并携带新的页码信息，开发者通常在此事件中更新显示的数据。

以下是一个典型的 ngx-bootstrap 分页组件的初始实现：

模板 (.html)

万彩商图

专为电商打造的AI商拍工具，快速生成多样化的高质量商品图和模特图，助力商家节省成本，解决素材生产难、产图速度慢、场地设备拍摄等问题。

下载


  
    
      {{content}}

组件 (.ts)

import { Component, OnInit } from '@angular/core';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
    selector: 'demo-pagination-content-switching',
    templateUrl: './content-switching.html',
    styles: [`
        .content-wrapper {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding-left: 10px;
            margin-bottom: 10px;
        }
    `]
})
export class DemoPaginationContentSwitchingComponent implements OnInit {
    contentArray: string[] = []; // 原始数据数组
    returnedArray?: string[];    // 当前页显示的数据

    // 初始化数据
    ngOnInit(): void {
        this.contentArray = new Array(90).fill('').map((v: string, i: number) => `Content line ${i + 1}`);
        this.returnedArray = this.contentArray.slice(0, 10); // 默认显示第一页
    }

    // 处理分页事件，更新显示内容
    pageChanged(event: PageChangedEvent): void {
        const startItem = (event.page - 1) * event.itemsPerPage;
        const endItem = event.page * event.itemsPerPage;
        this.returnedArray = this.contentArray.slice(startItem, endItem);
    }
}

上述代码实现了基本的分页功能，用户可以通过点击分页