时间戳

首页 > 解决方案 > 在 fromEvent resize observable 中添加初始值

angular - 在 fromEvent resize observable 中添加初始值

问题描述

我尝试获取窗口内部宽度的可观察值。

我fromEvent在调整大小事件上设置了一个可观察的观察

public get nativeWindow(): Window {
  return window;
}

public getWindowSize(): Observable<number> {
  return fromEvent(this.nativeWindow, 'resize').pipe(
    map(event => (event.target as Window).innerWidth)
  );
}

我希望能够获得 window.innerWidth 的初始值，因为在实际调整窗口大小之前不会触发调整大小。

我可以使用BehaviorSubject，但它迫使我订阅fromEvent关于该主题的下一个。

我们尝试在地图之前使用startWith(this.nativeWindow.innerWidth)运算符，但地图不会将事件参数作为事件获取，而是获取startWith数字。

是否有任何 rxjs 运算符可以让我在获得实际调整大小事件之前初始化第一个数字？

标签： angulartypescriptrxjs

解决方案

所以问题是您需要map处理初始值，但同时您需要它处理Event仅由'resize'事件发出的对象。

那么最简单的方法就是使用startWithafter map：

return fromEvent(this.nativeWindow, 'resize').pipe(
  map(event => (event.target as Window).innerWidth),
  startWith(this.nativeWindow.innerWidth)
);

或者如果这是不可能的（例如，逻辑更复杂），您可以“模拟”该对象，以便map像处理任何其他 Event 对象一样处理它。

return fromEvent(this.nativeWindow, 'resize').pipe(
  startWith({ target: { innerWidth: this.nativeWindow.innerWidth }}),
  map(event => (event.target as Window).innerWidth)
);

推荐阅读