css - 如何基于媒体查询动态传值

Question

在我的产品部分，大约有 300 种产品，因此对于分页，我使用了 ngx-pagination 插件。所以产品应该基于媒体查询来展示。例如，我必须将值(在媒体查询中)传递给 1600px 到 1200px 应该有 itemsPerPage:30，1199 到 768 itemsPerPage:24

如何实现？

<ecom-section-box>
    <ecom-card-wc-5 *ngFor="let data of dataArray4  | paginate: { itemsPerPage: 30, currentPage: p } " [data]="data"></ecom-card-wc-5>
</ecom-section-box>
<div class="card card2">
    <span class="pagination-alignment">
        <pagination-controls (pageChange)="p = $event" ></pagination-controls>
    </span>
</div>

Answer 1

在 init 上获取窗口宽度

public innerWidth: any;
ngOnInit() {
  this.innerWidth = window.innerWidth;
}

如果你想在调整大小时保持更新:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

您可以使用此代码检查窗口大小是 1600px 到 1200px 还是 1199 到 768 并相应地设置 itemsPerPage。

如何使用此代码:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
  if (this.innerWidth <= 1600 && this.innerWidth >= 1200) {
    itemsPerPage = 30;
  } else if (this.innerWidth <= 1199 && this.innerWidth >= 768) {
    itemsPerPage = 24;
  }
}