Angular 中的后台数据加载和解析器答案

【问题标题】：Background data loading and resolver in AngularAngular 中的后台数据加载和解析器
【发布时间】：2019-04-23 14:46:20
【问题描述】：

我有一个包含多个选项卡的组件：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 传递给解析器，但这也不是成功的。我该如何实现？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

您需要在某处致电fetchData，例如getData。

【讨论】：

它将重写this.data，我将获得新的可观察和新的api请求
所以你可以在构造函数中调用它。
在什么构造函数中？如果在 WrapperComponent 的构造函数中 - 它不会改变任何东西。如果在 tab3 组件的构造函数中 - 这根本不是我想要的
我没有注意到你调用fetchData我包装解析器：P 但是你可以在DataStorageService的构造函数中调用它。 Angular 在第一次需要时创建服务。
它不能解决我的问题。正如我所写。 this.data 是热可观察的，但在有人订阅它之前不会被调用。所以这个我fixed 订阅为空。此外，除了tab3，我也不会将此数据放在所有选项卡的路由器快照中