Добавьте начальное значение в fromEvent

Question

Я пытаюсь получить наблюдаемую внутреннюю ширину окна.

Я установил 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, который мог бы позволить мне инициализировать первое число перед получением фактических событий изменения размера?

Answer 1

Итак, проблема в том, что вам нужно map для обработки начального значения, но в то же время вам нужно, чтобы оно работало с Event объектами, которые испускаются только событием 'resize'.

Ну, самый простой способ - просто использовать startWith после 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)
);

Answer 2

Вы можете использовать оператор startWith и передать начальное значение наблюдаемой

import { startWith } from 'rxjs/operators';

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