如何仅在宽度变化时触发 window resize

Question

我需要根据 window 的当前屏幕宽度在元素上应用一些自定义样式。

使用以下@HostListener 已成功完成：

 @HostListener('window:resize', ['$event'])
  public resize() {

   // apply styles here depending on current window.innerWidth...

  }

但是，我想在 window 的 width 发生变化且 [=22] 时触发调整大小方法 ONLY =]高度改变时什么也不做.

到目前为止，如果用户更改 window 高度并且这破坏了我的样式逻辑，也会调用调整大小方法！

所以我的问题是：在 Angular 中是否有一种方法可以制作类似 ('window:resizeX') 的东西，以便仅在 window 宽度发生变化时调用 resize()，忽略变化在 window 高度？

Answer 1

你可以使用这个方法：

fromEvent(window, 'resize')
  .pipe(map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

如果您想要一些优化，请使用 auditTime():

fromEvent(window, 'resize')
  .pipe(auditTime(100), map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

因此您的方法运行不会比每 100 毫秒

Answer 2

Oleg Postoev 是对的，这是最好的方法。

此版本仅在宽度保持不变 (800ms) 时触发；

fromEvent(window, 'resize').pipe(
  debounceTime(800),
  tap((event: UIEvent) => {
    const width = event.target['innerWidth'];
    // DO SOMETHING
  }, takeUntil(this.unsubscribe$)) // CLEANUP
).subscribe();

Answer 3

收听调整大小的主要常用方式有

fromEvent(window, 'resize')
@HostListener('window:resize', ['$event'])

两者各有千秋，主要是偏好和语境。

检查此 fromevent window vs hostlistener。

@Oleg 使用 fromEvent 运算符解决了您的问题，如果您需要使用 HostListener 方式进行修复。可能是这样。

private lastScreenWidth;
....

ngAfterViewInit(){
    this.lastScreenWidth = window.innerWidth;
}

@HostListener('window:resize', ['$event'])
private resize(event) {
    if (event.target.innerWidth !== this.lastScreenWidth) {
        // Do your staff based on window width resize..
        this.lastScreenWidth = event.target.innerWidth;
    }
}

如何仅在宽度变化时触发 window resize

How to trigger window resize on width changes only

resize

typescript

angular