Angular Mat Paginator：如何防止页面更改或页面大小更改？

Question

看起来 MatPaginator 仅在用户进行此类更改（PageEvent 事件）后才会通知。

是否还有一种方法可以拒绝页面更改或页面大小的更改？

如果在页面上进行了一些编辑，并且 - 如果用户尝试转到下一页 - 我们希望为用户提供留在该页面上的选项，以避免丢失这些更改，这可能会很有用。

非常感谢！

Answer 1

似乎没有任何开箱即用的东西，因为分页器为 pageIndex 设置自己的值，而不是仅仅输出它以供您使用 pageIndex 输入进行设置。我不喜欢以这种方式制作我的组件，因为您的子状态和父状态可能会不同步，但话虽如此，您可以使用 ViewChild 来实现这一点。

请参阅 this StackBlitz 了解实现细节。

代码如下：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
@ViewChild(MatPaginator) paginator: MatPaginator;

  pageIndex = 3;

  confirmPageChange(pageEvent: PageEvent) {
    // throw up a modal for confirmation

    // prevent or allow page change by setting pageIndex property directly on the paginator
    this.paginator.pageIndex = 3; // or pageEvent.pageIndex
  }
}

<mat-paginator [pageIndex]="pageIndex" [length]="10000" (page)="confirmPageChange($event)"></mat-paginator>

Answer 2

除了 Robert Dempsey 的答案之外，它还可以有效防止 pageIndex 更改。

我发现防止 pageSize 更改或模拟它的唯一方法是这个不漂亮的解决方案：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // Paginator input variables
  ...
  
  resetPaginator: boolean = false;

  confirmPageChange(pageEvent: PageEvent) {
    // throw up a modal for confirmation and evaluate its result
    if ([Page change canceled]) {
        this.resetPaginator = true;
        setTimeout(() => {
            this.resetPaginator = false;
        }, 0);

        return;
    }
   
    // Apply pageEvent properties
  }
}

<mat-paginator *ngIf="!resetPaginator" [inputs] (page)="confirmPageChange($event)"></mat-paginator>
<div *ngIf="resetPaginator" style="height: 48px"></div>

这样，分页器就可以按原样输入“重新初始化”。我添加了额外的 div 以避免看起来更难看的结果。

这里有一篇关于重新初始化子组件的文章： 如何重新初始化Angular2中的子组件？