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