如何同步 mat-paginator 页面大小？

Question

我正在尝试同步嵌套在多个子组件中的多个垫分页器的页面大小。

我正在使用共享服务来存储“全局”页面大小。

但是，所有 mat-paginator 的页面大小都会更新，但分页器的实际页面大小并未改变。

共享服务：

import { EventEmitter, Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
   providedIn: 'root'
 })
 export class PaginatorService {
   private pageSizeSubject = new BehaviorSubject<number>(10); // Default page size
   pageSize$ = this.pageSizeSubject.asObservable();
 
   setPageSize(pageSize: number) {
     this.pageSizeSubject.next(pageSize);
   }
 }

子表组件

<table mat-table [dataSource]="propertiesDataSource" multiTemplateDataRows class="mat-elevation-z0" id="properties-table" matSort>   
   <ng-container *ngFor="let column of propertiesTableColumns" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ tableHeader[column] }}</th>
      <td mat-cell *matCellDef="let lease">
          <ng-container [ngSwitch]="column">
              <span *ngSwitchDefault>{{ lease[column] }}</span>
          </ng-container>
      </td>
  </ng-container>

   <tr mat-header-row *matHeaderRowDef="propertiesTableColumns; sticky:true"></tr>
   <tr mat-row *matRowDef="let property; columns: propertiesTableColumns" (click)="openProperty(property)" class="item-row"></tr> 
</table>
<mat-paginator [pageSizeOptions]="[10,25,50,100]" [pageSize]="pageSize" (page)="onPageSizeChange($event)" showFirstLastButtons>
</mat-paginator>

export class LocationDetailPropertyTableComponent implements OnInit, AfterViewInit {
   @Input() properties: PropertyDtoModel[] = [];
   @Input() locationCustomerID: number;
   @Input() dateFilter: Date = new Date();

   @ViewChild(MatPaginator) paginator: MatPaginator;

   public propertiesDataSource: MatTableDataSource<PropertyDtoModel> = new MatTableDataSource();
   public propertiesTableColumns = Object.keys(eTableHeader) as Array<keyof typeof eTableHeader>;
   public tableHeader = eTableHeader;
   public pageSize: number;

   constructor(
      private router: Router,
      private rentersLegalLiabilityService: RentersLegalLiabilityService,
      private paginatorService: PaginatorService,
      private chageDetectorRef: ChangeDetectorRef
   ) {}

   ngAfterViewInit(): void {
      this.propertiesDataSource.paginator = this.paginator;
   }

   ngOnInit() {
      this.propertiesDataSource = new MatTableDataSource(this.properties);

      this.paginatorService.pageSize$.subscribe(size => {
         this.pageSize = size;
         this.chageDetectorRef.detectChanges(); // Manually trigger a change detection
      });
   }

   onPageSizeChange(event: any) {
      this.paginatorService.setPageSize(event.pageSize);
    }

父页面组件

<table mat-table [dataSource]="locationDataSource" multiTemplateDataRows class="mat-elevation-z0" id="locations-table" matSort>
   <!-- column for Expand button -->
   <ng-container matColumnDef="ExpandButton">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let location" (click)="$event.stopPropagation()">
         <button mat-icon-button (click)="expandedLocation=expandedLocation===location ? null : location"
            matTooltip="Expand">
            <span class="mat-button-wrapper">
               <mat-icon>
                  {{expandedLocation === location ? "expand_more": "chevron_right"}}
               </mat-icon>
            </span>
         </button>
      </td>
      <td mat-foter-cell *matFooterCellDef></td>
   </ng-container>
   
   <ng-container *ngFor="let header of tableHeaders" [matColumnDef]="header.key">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ header.label }}</th>
      <td mat-cell *matCellDef="let location">{{ location[header.key] }}</td>
      <td mat-footer-cell *matFooterCellDef>{{ getFooterContent(header) }}</td>
   </ng-container>

   <!-- Expanded content column -->
   <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let location" [attr.colspan]="locationsTableColumns.length">
         <div [@detailExpand]="location == expandedLocation ? 'expanded' : 'collapsed'">
            <location-detail-property-table [properties]="location.LocationProperties" [locationCustomerID]="location.LocationCustomerID" [dateFilter]="dateFilter"></location-detail-property-table>
         </div>
      </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="locationsTableColumns; sticky:true"></tr>
   <tr mat-row *matRowDef="let location; columns: locationsTableColumns" class="item-row"></tr>
   <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
   <tr mat-footer-row *matFooterRowDef="locationsTableColumns"></tr>
</table>

我尝试强制进行更改检测，但没有成功。在另一个扩展表上将分页从 10-25 更改后，所有其他分页器也应更新为 25 页面大小。

Answer 1

IIRC

MatTableDataSource

仅对发出的

PageEvents

作出反应，并且仅更改

pageSize

属性不会发出这些事件。

因此，您要么必须手动计算正确的新页面并更新分页器上的

page

或

pageIndex

才能发出事件，要么您可以使用内置的

_changePageSize(pageSize)

方法来计算新的pageIndex一种确保应用 pageSize 时页面上的第一项仍将显示的方法，然后发出新页面事件。我认为

_changePageSize(pageSize)

也已经触发了更改检测，因此您也应该能够删除它：

  this.paginatorService.pageSize$.subscribe(size => {
     this._changePageSize(size);
  });

这是 stackblitz

上的一个有效的简化示例