Question

我正在尝试为库构建自定义ngx-pagination，而我

引用链接https://github.com/michaelbromley/ngx-pagination但我不

了解我需要做什么来构建自定义分页。它不响应

点击事件。

HTML

<table class="table">
  <thead>
    <tr>
      <th>SL</th>
      <th>Ref</th>
      <th>Project Name</th>
      <th>Product Owner</th>
      <th>Project Type</th>
      <th>Remaining Days</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let project of projects  | paginate: { itemsPerPage: 7, currentPage: p } ;let ndx = index" >
      <td>{{ndx+1}}</td>
      <td>{{project.ref}}</td>
      <td>{{project.projectName}}</td>
      <td>{{project.productOwner}}</td>
      <td>{{project.projectType}}</td>
      <td>{{project.days}}</td>
      <td>{{project.status}}</td>
    </tr>
   </tbody>
</table>

  <pagination-template #p="paginationApi"
                 (pageChange)="pageChange.emit($event)">

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

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

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

自定义-COMPONENT.TS

@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
page: number = 1;

 pageChanged(event){
    console.log("pageChanged");
  }

要使其工作还需要进行哪些更改？我在这里遗漏了一些东西我已经使用npm安装了库。请建议。

Answer 1

解决了这个问题。想要命名冲突。

<强> HTML

 <pagination-template #pT="paginationApi"
                         (pageChange)="p = $event">

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

Ngx-pagination不适用于自定义组件

1 个答案: