如何根据媒体查询动态传递值

Posted 2023-03-06

【中文标题】如何根据媒体查询动态传递值

【英文标题】：How to pass value dynamically based on media query

【发布时间】：2019-09-19 06:21:09

【问题描述】：

在我的产品部分有大约 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>

【参考方案1】：

获取init上的窗口宽度

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

如果您想在调整大小时保持更新：

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

您可以使用此代码检查窗口大小是1600px to 1200px 还是1199 to 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;
  

【讨论】：

你有一个变量值，你可以在 html 中使用该变量，就像你使用其他变量一样

这样你就可以像这样使用paginate: itemsPerPage: itemsPerPage(this will be the variable which we are setting when screen have specific width), currentPage: p

【参考方案2】：

您可以使用@angular/cdk/layout 中的BreakpointObserver。

import  BreakpointObserver, Breakpoints  from '@angular/cdk/layout';
import  switchMap  from 'rxjs/operators'
import  of, EMPTY  from 'rxjs'

queryValues: Record<string, number> = 
  '(min-width: 768px) and (max-width: 1199px)': 24,
  '(min-width: 1200px) and (max-width: 1600px)': 30,
;

itemsPerPage: number;

constructor(private breakpointObserver: BreakpointObserver)  

ngOnInit() 
  const queries = Object.keys(this.queryValues)
  this.breakpointObserver.observe(queries).pipe(
    switchMap(state => 
      const activeQuery = queries.find(q => state.breakpoints[q]);
      return activeQuery ? of(this.queryValues[activeQuery]) : EMPTY
    )
  ).subscribe(queryValue => this.itemsPerPage = queryValue)