如何为 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>

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

我希望它具有响应性，这意味着对于小屏幕 size 应该采用“sm”，而对于中等大小的屏幕应该采用“lg”。 该链接没有有关如何动态更改大小的信息。 使用 CSS 是另一种方式，但我希望它以引导方式完成。

Answer 1

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

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

编辑 要对窗口实现做出反应，您需要设置 Host Listener

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