分页组件的
我正在使用Valor软件的分页功能(点击访问(。
当屏幕宽度发生变化时，我想更改maxSize输入，如以下示例所示：单击查看示例。
似乎maxSize只是通过刷新页面而改变，而不是在宽度改变时。注意到输入boundaryLinks可以在宽度变化时更新。
对于宽度，我设置了一个HostListener来监听窗口：调整大小事件，如下例所示：
@HostListener('window:resize', ['$event']) onWindowResize() {
this.getScreenWidthOnResize = window.innerWidth;
if(this.getScreenWidthOnResize <= 1050) {
this.maxSize = 3;
} else {
this.maxSize = 10;
}
console.log(this.getScreenWidthOnResize);
}
更改maxSize。在html页面中，我有以下内容：
<pagination
[boundaryLinks]="showBoundaryLinks=true"
[totalItems]="totalItems=30"
[itemsPerPage]="itemsPerPage=5"
[(ngModel)]="currentPage=6"
(pageChanged)="pageChanged($event)"
[maxSize] = "maxSize=default 10, but when width gets smaller, change it to 3, meaning that will be visible only 3 pages that the user can choose"
[rotate] = "true"
></pagination>
只是我想说的常规。知道宽度变化时maxSize为什么不变化吗？
或者一些能帮助我改变小屏幕限制的东西。
ngx-bootstrap(与@ng-bootstrap/ng-bootstrap相比(实现似乎不支持maxSize的动态更改。
这里有一个变通方法：
import { Component, HostListener, ViewChild } from '@angular/core';
import { PaginationComponent } from 'ngx-bootstrap/pagination';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
maxSize = 3;
@ViewChild(PaginationComponent) paginationComp!: PaginationComponent;
@HostListener('window:resize', ['$event']) onWindowResize() {
const newMaxSize = window.innerWidth <= 1050 ? 3 : 10;
if (this.paginationComp.maxSize !== newMaxSize) {
this.paginationComp.maxSize = newMaxSize;
this.paginationComp.selectPage(this.paginationComp.page)
}
}
}