Angular Mat Paginator：如何防止页面更改或页面尺寸更改？

编程问答 2022-06-13

问题描述

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

还有其他方法可以拒绝页面更改或页面大小更改吗？

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

非常感谢！

解决方法

似乎没有任何开箱即用的功能，因为分页器为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>
angularangularangular-materialeventseventseventspaginator