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

Question

我在角度分量中有一个全局变量，如下所示，

visibleDays = 7

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

Answer 1

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

应用程序组件

  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
    }
    
  }

堆栈闪电战演示