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

Question

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

}

Answer 1

在 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

Answer 2

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

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