如何通过输入页码使用ngx-bootstrap pagination跳转到指定页面

我需要实现通过输入框输入页码，使用ngx-bootstrap pagination跳转到指定页面，以下是我的初始代码片段：

初始模板代码 #

<div class="row">
  <div class="col-xs-12 col-12">
    <div class="content-wrapper">
      <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
    </div>
    <pagination [totalItems]="contentArray.length" (pageChanged)="pageChanged($event)"></pagination>
  </div>
</div>

初始TS文件代码 #

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

@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    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 = new Array(90).fill('');
    returnedArray?: string[];

    ngOnInit(): void {
        this.contentArray = this.contentArray.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);
    }
}

解决方案 #

要实现输入页码跳转功能，需要添加输入框、绑定当前页码变量，并编写跳转逻辑控制页码合法性：

修改后的模板代码 #

<div class="row">
  <div class="col-xs-12 col-12">
    <div class="content-wrapper">
      <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
    </div>
    <!-- 添加页码输入框和跳转按钮 -->
    <div class="mb-2">
      <input 
        type="number" 
        [(ngModel)]="currentPage" 
        min="1" 
        [max]="totalPages"
        placeholder="输入页码"
        class="mr-2"
      >
      <button (click)="goToPage()" class="btn btn-primary">跳转</button>
    </div>
    <!-- 绑定currentPage到pagination组件，支持双向同步 -->
    <pagination 
      [totalItems]="contentArray.length" 
      [(ngModel)]="currentPage"
      (pageChanged)="pageChanged($event)"
      [itemsPerPage]="10"
    ></pagination>
  </div>
</div>

修改后的TS文件代码 #

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

@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    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 = new Array(90).fill('');
    returnedArray?: string[];
    currentPage = 1; // 当前页码变量
    itemsPerPage = 10; // 每页条数

    get totalPages(): number {
        // 计算总页数
        return Math.ceil(this.contentArray.length / this.itemsPerPage);
    }

    ngOnInit(): void {
        this.contentArray = this.contentArray.map((v: string, i: number) => `Content line ${i + 1}`);
        this.returnedArray = this.contentArray.slice(0, this.itemsPerPage);
    }

    pageChanged(event: PageChangedEvent): void {
        const startItem = (event.page - 1) * event.itemsPerPage;
        const endItem = event.page * event.itemsPerPage;
        this.returnedArray = this.contentArray.slice(startItem, endItem);
        this.currentPage = event.page; // 同步当前页码
    }

    goToPage(): void {
        // 控制页码在有效范围内
        const targetPage = Math.max(1, Math.min(this.currentPage, this.totalPages));
        if (targetPage !== this.currentPage) {
            this.currentPage = targetPage;
        }
        // 手动触发页面切换逻辑
        const startItem = (this.currentPage - 1) * this.itemsPerPage;
        const endItem = this.currentPage * this.itemsPerPage;
        this.returnedArray = this.contentArray.slice(startItem, endItem);
    }
}

关键说明 #

• 给pagination组件添加[(ngModel)]="currentPage"实现页码双向绑定，点击分页控件时自动同步当前页码
• 添加输入框并绑定currentPage，通过min和max属性限制输入范围，同时在goToPage方法中再次校验页码合法性
• 计算totalPages用于限制输入的最大页码，避免无效跳转
• goToPage方法中直接更新显示的内容数组，确保输入页码后页面内容同步更新

内容的提问来源于stack exchange，提问作者Roohi