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

Question

我正在使用Valor Software 的分页（点击访问） 。

我想在屏幕宽度发生变化时更改 maxSize 输入，如下例所示： 单击查看示例。

似乎 maxSize 仅通过刷新页面而不是在宽度更改时更改。 注意到输入的边界链接可以在宽度发生变化时更新。

对于宽度，我设置了一个 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);
}

更改 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 没有变化吗？

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

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)
    }
  }
}