一个常见的解决方法是使用ViewChild来访问每个矩形分页器并在Angular组件中实现独立的分页控制。以下是一个示例代码片段：

（1）在HTML模板中，使用多个mat-paginator组件，并为每个组件指定一个唯一的ID：

（2）在组件中，使用ViewChild来获取每个mat-paginator的实例，并定义独立的分页逻辑：

import { Component, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator';

@Component({ selector: 'app-mypage', templateUrl: './mypage.component.html', styleUrls: ['./mypage.component.css'] }) export class MyPageComponent implements OnInit { @ViewChild('paginator1', {static: false}) paginator1: MatPaginator; @ViewChild('paginator2', {static: false}) paginator2: MatPaginator;

ngOnInit() { this.dataSource.paginator = this.paginator1; this.dataSource.paginator = this.paginator2; }

pageEvent(paginatorName: string, event: any) { if(paginatorName === 'paginator1') { // 分页逻辑1 } else if(paginatorName === 'paginator2') { // 分页逻辑2 } } }

注意：在组件中定义独立的分页逻辑时，务必根据各自的 mat-paginator ID 在逻辑中进行区分。