当我单击 Angular 的 mat-paginator 的按钮时，有什么方法可以调用函数

问题描述

在 4 个按钮中，我想将其中一个用作下一页按钮。如何做到这一点？
这是分页器 HTML

<mat-paginator 
   [pageSize]="2"
   [pageSizeOptions]="[2,4,6]" showFirstLastButtons>         
</mat-paginator>

这些是打字稿代码的相关部分

recordsDataTable:any[]=[ ];
recordsData !: MatTableDataSource<any>;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngAfterViewInit()
{
  
   this.userservice.getRecords()
   .subscribe(
     (x)=>
       { 
        this.recordsDataTable=x.data;
        this.recordsData= new MatTableDataSource(x.data); 
        this.recordsData.paginator = this.paginator;
             
       }
      )

}

解决方法

分页器组件为您处理整个分页逻辑。你不处理点击它的按钮。该组件有一个 page 事件，您可以使用它来处理页面更改。

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="yourPageChangeLogic($event)">
</mat-paginator> 

,

在angular material 中，Paginator 自带一个事件 > (page)="getPageDetails($event)"。此事件为我们提供了有关该表的信息。

在 component.ts 文件中

getPageDetails(event:any) {
  console.log(event);
}

在 component.html 文件中

 <mat-paginator showFirstLastButtons
             [length]="totalDataLength"
             [pageSize]="pageSize"
             [pageSizeOptions]="pageOptions"
             (page)="getPageDetails($event)"></mat-paginator>

示例链接：https://stackblitz.com/edit/angular-pyix6j?file=src/app/table-pagination-example.html