Implementing ngx-pagination as a custom component

问题

I have two components:

list.component and pagination component, within list component I want to write logic of listing records, and I want to use ngx-pagination npm package to control pagination of given listing:

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

}

Till now my server side pagination is working absolutely fine.

Now I want to use PaginationControlsDirective such that I can put pagination template into list-pagination.component.html and then I can do some changes to this template as per requirement. But when I write write this template logic into list-pagination.component.html and then send pageChange event to list.component I do not get correct output, I am receving only pagination no.s like 1 2 3... 35 > which are not even clickable.

I tried below:

list-pagination.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>

list-pagination.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() {
  }


}

Then adding pagination component in list component:

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

then I got only below output for pagination:

Need help to implement it in right way.

Thanks!

My question is similar to this:

Ngx-pagination does not work for custom component but I did not get what is explained in its answer. OP has answered it himself.

回答1:

Your ngx-pagination template (pagination-template) is inside your component, and is not communicating with the paginationApi. It should exist in the same view as the list you are using the paginate pipe on. Like so:

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

Inside your component, extend the 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()
  }

 }

This is exemplified in the ngx-pagination github itself

来源：https://stackoverflow.com/questions/51870842/implementing-ngx-pagination-as-a-custom-component

标签

angular

ngx-pagination