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

<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>

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);
    }
}