如何知道是否点击了垫子分页器的下一个或上一个按钮

Question

我一直在努力检查是否点击了 mat-paginator的first last next或previous按钮，搜索了一堆网站，但找不到任何合理的方法。

如何检查单击了哪一个按钮？

这是我的分页信息的样子：

Answer 1

下面解释了如何使用 Angular Material 数据表在 Angular 应用程序中实现 mat-paginator。

.html

<mat-paginator [pageSize]="pageSize" [pageIndex]="pageNo"
      [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvents($event)">
</mat-paginator>

.ts

import { MatPaginator } from '@angular/material';

@ViewChild(MatPaginator, { static: true})
paginator: MatPaginator;

pageSize: number;
pageNo: number;

ngOnit() {
   this.pageSize = 10;
   this.pageNo = 0;
}

pageEvents(event: any) {
   console.log(event.pageIndex);
   console.log(event.pageSize);
   if(event.pageIndex > this.pageNo) {
     // Clicked on next button
   } else {
     // Clicked on previous button
   }
   // The code that you want to execute on clicking on next and previous buttons will be written here.
}

Answer 2

mat-paginator 提供页面更改事件的功能。在 mat-paginator 中添加它，以便在您单击下一个或上一个按钮时触发此功能：

在 .html 中：

<mat-paginator (page)="pageChanged($event)">

$event 是一个包含 previousPageIndex、pageIndex、pageSize 和 length 的对象。

添加这个黑客：

如果 previousPageIndex 大于 pageIndex，则表示单击的是上一个按钮。否则，如果 previousPageIndex 小于 pageIndex，则表示单击的是下一个按钮

在.ts：

pageChanged(event) {
  if (event.previousPageIndex > event.pageIndex) {
     // previous button clicked
  } else {
    // next button clicked
  }
}