Question

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

Answer 1

您需要在某个地方致电fetchData，例如在getData。

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

1 个答案: