如何解决Angular Mat Paginator:如何防止页面更改或页面尺寸更改?
看起来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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。