如何知道是否单击了 mat paginator 的下一个或上一个按钮答案

【问题标题】：How to know if the next or previous button of mat paginator is clicked如何知道是否单击了 mat paginator 的下一个或上一个按钮
【发布时间】：2020-01-21 23:21:54
【问题描述】：

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

如何检查点击了哪个按钮？

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

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

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

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

【讨论】：

是的，我知道，但你能帮我写出条件来知道点击了哪个按钮。我一直在尝试不同的逻辑，我的头脑要爆炸了：/
非常感谢，还有first 和last 页面怎么样，因为我正在尝试，因为逻辑问题而造成了麻烦。你能告诉我一个简单的方法来检查吗？
我已经更新了我的问题，以便您查看我的分页信息的样子

【解决方案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
  }
}

【讨论】：

更改页面大小也会更改几乎所有内容 =/
我同意@gleitonfranco，这不是正确的解决方案，因为它不会区分页面大小的变化。