NGX-Bootstrap/Angular - 分页 - 当我的屏幕视图（宽度）发生变化时无法更改 maxSize 输入

Question

我正在使用 Valor Software (click to access) 的分页。

我想在屏幕宽度发生变化时更改 maxSize 输入，如下例所示：Click to see example.

似乎 maxSize 仅通过刷新页面而改变，而不是在宽度改变时改变。注意到输入 boundaryLinks 可以在宽度改变时更新。

对于宽度，我设置了一个 HostListener 来监听 window:resize 事件，如下例所示：

@HostListener('window:resize', ['$event'])  onWindowResize() {
  this.getScreenWidthOnResize = window.innerWidth;
  if(this.getScreenWidthOnResize <= 1050) {
   this.maxSize = 3;
  } else {
   this.maxSize = 10;
  }
  console.log(this.getScreenWidthOnResize);
}

更改最大尺寸。在 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 没有改变吗？

或者帮助我改变小屏幕限制的东西。

Answer 1

看起来 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)
    }
  }
}

NGX-Bootstrap/Angular - 分页 - 当我的屏幕视图（宽度）发生变化时无法更改 maxSize 输入

NGX-Bootstrap/Angular - Pagination - cannot change the maxSize input when my screen view (width) is changing

javascript

html

angular

ngx-bootstrap