angular - 是否可以使用 Bootstrap 根据 Angular 屏幕尺寸设置变量值？

Question

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

visibleDays = 7

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

Answer 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 🚀🚀