如何拥有由角度信号驱动的响应式 UI 类，并根据视口的调整大小事件自动调整？

Question

//Approach 1: 
  dynamicWidthClass = computed(()=>{
    if (window.innerWidth > 992 && window.innerWidth <= 1284) {
      return "pl-25";
    } else if (window.innerWidth > 1284 && window.innerWidth <= 1828) {
      return "pl-18";
    } else if (window.innerWidth < 992 || window.innerWidth >= 1920) {
      return "pl-5";
    }
    return "pl-3"
  });
  windowInnerWidth = signal(window.innerWidth)
  
  


//Approach 2:
  dynamicWidthClass = signal("pl-3");

  @HostListener("window:resize", ["$event"])
  onResize(event) {
    if (window.innerWidth > 992 && window.innerWidth <= 1284) {
      this.dynamicWidthClass.set("pl-25");
    } else if (window.innerWidth > 1284 && window.innerWidth <= 1828) {
      this.dynamicWidthClass.set("pl-18");
    } else if (window.innerWidth < 992 || window.innerWidth >= 1920) {
      this.dynamicWidthClass.set("pl-5");
    }
  }




   <div
        class="wrapper d-flex flex-column flex-row-fluid vh-100"
        id="kt_wrapper"
      >
        <app-header></app-header>
        <div [ngClass]="dynamicWidthClass()">
          <router-outlet></router-outlet>
        </div>
        <app-footer class="mt-20r"
        ></app-footer>
      </div>

我有以下两种示例样式片段方法，我打算使用它们来使嵌套在父组件中的 Angular 路由元素根据视口宽度的变化更具响应性，哪种方法更适合我？我目前注意到这两种方法的工作方式不同，但都有一个共同点，那就是它们需要在每个视口调整大小时重新加载。

我做错了吗？我是否只能依赖 CSS 媒体查询或其他方法？我在这里面临的主要挑战是，我当前的项目主要由 Bootstrap 提供支持，它加载了大量的类，如果我打算用自己的类对其进行个性化，则很难跟踪这些类，因此我正在尝试实现一个更强大的类使我的代码响应式的方法，无需处理自定义类或删除引导程序

Answer 1

我认为您应该更喜欢媒体查询来满足此类要求。我使用 sass 运算符

@extend

来动态应用此类。

@media only screen and (max-width: 1920px) {
  #kt_wrapper > div {
    @extend .pl-25;
  }
}

@media only screen and (max-width: 920px) {
  #kt_wrapper > div {
    @extend .pl-18;
  }
}

@media only screen and (max-width: 320px) {
  #kt_wrapper > div {
    @extend .pl-5;
  }
}

---

如果您想要最简单的方法，就是使用可观察量，然后使用

toSignal

将最终结果转换为信号。我们可以使用

startWith

以便流在屏幕首次加载时运行一次。

export class App {
  dynamicWidthClass = toSignal(
    fromEvent(window, 'resize').pipe(
      startWith(null),
      map(() => {
        const windowSignalValue = window.innerWidth;
        const innerWidth = windowSignalValue || 0;
        console.log(innerWidth);
        if (innerWidth > 992 && innerWidth <= 1284) {
          return 'pl-25';
        } else if (innerWidth > 1284 && innerWidth <= 1828) {
          return 'pl-18';
        } else if (innerWidth < 992 || innerWidth >= 1920) {
          return 'pl-5';
        }
        return 'pl-3';
      })
    )
  );
}

Stackblitz 演示

---

如果您想要可观察/信号方法，可以使用

fromEvent

来侦听窗口大小调整，然后使用

map

获取内部宽度。我们使用

toSignal

将其转换为信号，然后使用该信号使用

computed

计算类别。

export class App {
  windowInnerWidth = toSignal(
    fromEvent(window, 'resize').pipe(
      map(() => {
        return window.innerWidth;
      })
    )
  );
  dynamicWidthClass = computed(() => {
    const windowSignalValue = this.windowInnerWidth();
    const innerWidth = windowSignalValue || 0;
    console.log(innerWidth);
    if (innerWidth > 992 && innerWidth <= 1284) {
      return 'pl-25';
    } else if (innerWidth > 1284 && innerWidth <= 1828) {
      return 'pl-18';
    } else if (innerWidth < 992 || innerWidth >= 1920) {
      return 'pl-5';
    }
    return 'pl-3';
  });
}

Stackblitz 演示