是否可以使用引导程序根据角度的屏幕尺寸设置变量值？

【问题标题】：Is it possible to set a variable value based on screen size in angular using bootstrap?是否可以使用引导程序根据角度的屏幕尺寸设置变量值？
【发布时间】：2020-12-14 15:05:32
【问题描述】：

我在这样的角度组件中有一个全局变量，

visibleDays = 7

我希望能够根据屏幕尺寸控制此值。对于较小的设备，我希望这是 3 而不是 7。是否可以对“sm”、“xs”设备执行此操作？

【问题讨论】：

标签： angular bootstrap-4 responsive-design

【解决方案1】：

您可以跟踪窗口大小和 innwewidth 的基数更新 visibleDays 的值

app.component

  visibleDays = 7;

  @HostListener("window:resize", []) updateDays() {
    // lg (for laptops and desktops - screens equal to or greater than 1200px wide)
    // md (for small laptops - screens equal to or greater than 992px wide)
    // sm (for tablets - screens equal to or greater than 768px wide)
    // xs (for phones - screens less than 768px wide)
  
    if (window.innerWidth >= 1200) {
      this.visibleDays = 7; // lg
    } else if (window.innerWidth >= 992) {
      this.visibleDays = 6;//md
    } else if (window.innerWidth  >= 768) {
      this.visibleDays = 5;//sm
    } else if (window.innerWidth < 768) {
      this.visibleDays = 3;//xs
    }
    
  }

stackblitz demo ??

【讨论】：