如何为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是另一种方法，但我希望通过Bootstrap方法完成。

Answer 1

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

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

修改 要对窗口重做做出反应，您需要设置主机监听器

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