如何为 ngb 分页动态设置大小选择器输入

Question

我有下面的代码工作正常

 <ngb-pagination class="d-flex justify-content-end" [collectionSize]="100" [pageSize]="5"
  [(page)]="currentPage" [maxSize]="5" [rotate]="true" (pageChange)="getToPage(currentPage)" [boundaryLinks]="true"
  [ellipses]="true" size="lg"></ngb-pagination>

正如我从官方文档 link - https://ng-bootstrap.github.io/#/components/pagination/api 中读到的，据说 size 输入可以设置为 "lg" 或"sm" 在 html 中。

我希望它具有响应性，这意味着对于小屏幕 size 应该采用 "sm"，对于中加屏幕它应该采用 "lg"。 link 没有关于如何动态改变大小的信息。使用 CSS 是另一种方法，但我希望它以 ng Bootstrap 方式完成。

Answer 1

为当前大小声明一个变量size: string = 'sm';，将其放入模板[size]="size"，并在需要时随时更改。

https://stackblitz.com/edit/angular-l4cfzf?file=app%2Fpagination-size.html

编辑要对 window reaize 做出反应，您需要设置 Host Listener

@HostListener('window:resize', ['$event'])
onResize(event) {
    // check/set the size
}

如何为 ngb 分页动态设置大小选择器输入

how to dynamically set size selector input for ngb pagination

ng-bootstrap

angular