angular material分页器实现当前页可输入切换

在Angular Material中，可以使用`MatTablePagination`组件来实现分页功能，并允许用户手动输入当前页数进行切换。以下是一个简单的步骤说明：

1. 首先，你需要在你的模块中导入` MatTableModule`和`MatPaginatorModule`：

   import { MatTableModule, MatPaginatorModule } from '@angular/material/table/paginator';

2. 然后，在HTML模板中添加`MatTablePagination`组件，并将其属性设置为动态绑定到数据模型中，如`pageSizeOptions`和`currentPage`：

   <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [(currentPage)]="currentPage">
   </mat-paginator>

`[(currentPage)]`语法用于双向数据绑定，让用户输入的值实时更新组件状态。

3. 定义变量`currentPage`作为当前页的索引，比如在组件的TS文件里：

   export class YourComponent {
     currentPage = 0; // 初始化为第一页
   }

4. 当用户更改了输入框的内容并提交时，可以在组件内处理这个事件，比如使用`EventEmitter`或者自定义管道来监听并更新页面：

   ngOnChanges() {
     if (this.currentPage !== this.inputPageNumber) {
       // 检查输入是否有效，然后更新page
       this.currentPage = this.validateAndSetPage(this.inputPageNumber);
     }
   }

   validateAndSetPage(pageNumber: number): number {
     return Math.min(Math.max(pageNumber, 0), this.totalPages - 1); // 防止越界
   }

5. 用户可能需要提供一个表单控件（如`<input>`）供他们输入页码：

   <input type="number" (change)="onPageInputChange($event.target.value)">
   <button (click)="goToPage(currentPage)">Go to page</button>

并在相应的方法中处理输入值的变化，例如`onPageInputChange`.