将 ngx-pagination 实现为自定义组件

Posted 2023-03-29

【中文标题】将 ngx-pagination 实现为自定义组件

【英文标题】：Implementing ngx-pagination as a custom component

【发布时间】：2019-01-23 01:08:22

【问题描述】：

我有两个组件：

list.component 和分页组件，在列表组件中我想编写列表记录的逻辑，我想使用ngx-pagination npm package 来控制给定列表的分页：

list.component.html：

<table id="example" class="patients-listing">
    <thead>
        <tr>
            <th>Member</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Action</th>

        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let record of data['data'] | paginate:   id: 'server', itemsPerPage: 40, currentPage: patientsData['pagination']['current_page'], totalItems: patientsData['pagination']['total'] ">

            <td>record.firstname</td>
            <td>record.phone</td>
            <td>record.email</td>
            <td><a class="action" href="javascript:void">edit</a></td>
        </tr>
      </tbody>
  </table>
  <div class="group-pagination">
      <pagination-control id= "server" maxSize="5" (pageChange)="getUsers($event)"></pagination-control>
  </div>

list-component.ts

import  Component, OnInit, Input, AfterViewInit  from '@angular/core';
import  UserService  from '@app/services';

@Component(
  selector: 'listing',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
)
export class ListMyPatientsComponent implements OnInit, AfterViewInit 

  private currentPageNum = 1;
  private perPage = 40;
  data  = null
  constructor(private _userService: UserService) 
    this.getUsers(this.currentPageNum);
   

  ngOnInit() 


    this._userService.currentUsersList$.subscribe((usersList)=>
    
      if(usersList)
      
        this.data = usersList
      

    )
  

  ngAfterViewInit()
  

  


  getCareGroup(pageNum)
  

    this._userService.triggerCallForUsers("page":this.currentPageNum, "perPage":this.perPage)
  

到目前为止，我的服务器端分页工作正常。

现在我想使用PaginationControlsDirective 这样我可以放置分页 模板到 list-pagination.component.html 然后我可以根据需要对此模板进行一些更改。但是当我写这个模板逻辑到 list-pagination.component.html 然后将 pageChange 事件发送到 list.component 我没有得到正确的输出，我只收到像 1 2 3... 35 > 这样的分页号，甚至无法点击。

我在下面尝试过：

列表分页.component.html：

<pagination-template id= "server" maxSize="5"  #pT="paginationApi"
(pageChange)="pageChanged()">

<div class="pagination-previous" [class.disabled]="pT.isFirstPage()">
<a *ngIf="!pT.isFirstPage()" (click)="pT.previous()"> < </a>
</div>

<div *ngFor="let page of pT.pages" [class.current]="pT.getCurrent() === page.value">
<a (click)="pT.setCurrent(page.value)" *ngIf="pT.getCurrent() !== page.value">
<span> page.label </span>
</a>
<div *ngIf="pT.getCurrent() === page.value">
<span> page.label </span>
</div>
</div>

<div class="pagination-next" [class.disabled]="pT.isLastPage()">
<a *ngIf="!pT.isLastPage()" (click)="pT.next()"> > </a>
</div>

</pagination-template>

列表分页.component.ts：

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

@Component(
  selector: 'cg-pagination',
  templateUrl: './list-pagination.component.html',
  styleUrls: ['./list-pagination.component.scss']
)
export class PaginationComponent implements OnInit 
  @Input() id: string;
  @Input() maxSize: number;
  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
  page = 1;

   pageChanged(event)

    this.pageChange.emit(event)
    
  constructor()  

  ngOnInit() 
  

然后在列表组件中添加分页组件：

 <cg-pagination (pageChange)="getCareGroup($event)"></cg-pagination>

然后我只得到下面的分页输出：

需要帮助以正确的方式实施它。

谢谢！

我的问题与此类似：

Ngx-pagination does not work for custom component 但我没有得到答案中的解释。 OP自己回答了。

【问题讨论】：

有人解决了吗？

@ARJUN 一个新的答案已经发布。你可能想看看。

【参考方案1】：

您的 ngx-pagination 模板 (pagination-template) 在您的组件内，并且不与 paginationApi 通信。它应该与您使用paginate 管道的列表存在于同一视图中。像这样：

<div *ngFor="let item of items | paginate: config">itemContent</div>

<pagination-template #p="paginationApi" [id]="config.id" 
   (pageChange)="config.currentPage = $event">

   <your-component [paginationData]="p"></your-component>

</pagination-template>

在您的组件中，扩展 paginationControls：

import  Component, Input  from '@angular/core';
import  PaginationControlsComponent, PaginationControlsDirective  from 'ngx-pagination';

@Component(
  selector: 'your-component'
  ...
)

export class YourComponent extends PaginationControlsComponent 

  @Input('paginationData') p: PaginationControlsDirective;

  constructor() 
    super()
  

 

这是 ngx-pagination github 本身中的exemplified

【参考方案2】：

看看下面的视频是否有帮助。定制ngx-pagination库是一步一步的过程

https://www.youtube.com/watch?v=jcCrvO4EpGI&t=3s

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review