У меня есть компонент с несколькими вкладками: tab1, tab2, tab3. Навигация между вкладками происходит по маршруту. tab1 является вкладкой по умолчанию, которая активна, когда пользователь заходит на страницу. tab3 требуется вызов API для получения данных для отображения. Я хочу загрузить эти данные в фоновом режиме в распознаватель WrapperComponent (обертка над этими вкладками), чтобы предотвратить длительную загрузку tab3. Также у меня есть распознаватель для tab3 для случаев, когда пользователь загружает страницу по URL, которая содержит tab3. Когда пользователь перемещается tab3, я хочу дождаться загрузки данных и больше не вызывать его.
Итак, у меня есть сервис:
@Injectable({
providedIn: 'root'
})
export class DataStorageService {
fetchData(requestId: string): void {
this.data= this.reportsApi.getData(requestId).pipe(shareReplay(1));
}
getData(): Observable<data[]> {
return this.data;
}
}
Итак, в обработчике WrapperComponent я звоню DataStorageService.fetchData, чтобы начать загрузку данных в фоновом режиме.
А в резольвере tab3 я просто возвращаю this.data из сервиса:
resolve(route: ActivatedRouteSnapshot) {
return this.DataStorageService.getData();
}
Он отлично работает, кроме начальной загрузки данных. Поэтому при загрузке страницы на tab1 данные не начинают загружаться. Я исправил это с помощью дополнительной строки в fetchData:
fetchData(requestId: string): void {
this.data= this.reportsApi.getData(requestId).pipe(shareReplay(1));
this.data.subscribe(v => v);
}
Но это не кажется правильным. Я также пытался использовать BehaviorSubject, ReplaySubject таким образом:
fetchData(requestId: string): void {
this.reportsApi.getData(requestId).subscribe(data => this.data = data)
}
И передать его asObservable для распознавателя, но он тоже не удался. Как я могу это реализовать?