fromEvent from rxjs не работает должным образом

Question

Я создал компонент с функцией поиска, который вызывает API и отображает данные на странице. Как только я получу результаты поиска, я сохраню их в localStorage, чтобы восстановить данные, как только вы вернетесь на ту же страницу компонента поиска. Все работает нормально, пока я не назначу сохраненные данные обратно наблюдаемому результату свойства formEvent this.searchResult $. Проблема в том, что fromEvent больше не срабатывает, когда я возвращаюсь на ту же страницу по другим маршрутам.

  ngOnInit() {
 const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.log('working'); }));
    this.searchResult$ = searchEvent$
      .pipe(
        tap(() => { this.isDataOn = true }),
        map(event => event.target.value),
        filter(value => value ? true : false),
        switchMap(search => this.notesService.onSearchNotes(search)))
      )
 if (!this.isDataOn) {
      this.refreshData()
    }
}
refreshData() {
    if (localStorage.getItem("queryStack")) {
      const data = JSON.parse(localStorage.getItem("queryStack") || "[]");
      console.log(data);
      this.searchResult$ = of(data);
    }
  }

Answer 1

Попробуйте следующий подход, который объединяет любые сохраненные данные, хранящиеся в локальном хранилище, с результатами, полученными с сервера в ответ на события keyup.

// in your imports
import { merge } from 'rxjs';

ngOnInit() {
    const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.log('working'); }));
    this.searchResult$ = merge(
        of(this.getSavedData()),
        searchEvent$
            .pipe(
                map(event => event.target.value),
                filter(Boolean),
                debounceTime(1000),
                distinctUntilChanged(),
                switchMap(search => this.notesService.onSearchNotes(search))
            )
    );
}
getSavedData() {
    const localStorageValue = localStorage.getItem("queryStack") || "[]";
    try {
        return JSON.parse(localStorageValue);
    } catch (ex) {
        console.error('Error parsing JSON:', ex);
        return [];
    }
}