Angular NG5&；RxJS：在加载时进行Http调用，并在数据可用时使用

我需要在Angular 5中调用应用程序加载，然后在整个应用程序中使用返回的数据。目标是预加载数据。稍后，我需要立即使用数据，或者等待数据加载，而不复制调用

我相信我已经实现了所需的功能，如中所示，但我根本没有正确完成。我刚刚打了个电话，马上就订阅了，所以可观察的是

hot

。因此，这是一个错误-没有正确地使可观察的

热

这是我的代码，请注意注释部分：

  constructor(private http: Http) {
    const testUrl: string = 'http://httpbin.org/delay/3';
    this.vlData = this.http.get(testUrl)
      .map( (res) => res.json() ).publishReplay(1).refCount()
      .catch( (err) => Observable.throw(error.json().error) )
      //.publish();

//this.vlData.connect();

  this.vlData.subscribe(
  (next) => {console.log('INITIAL DATA RETURN: ', next)},
  (err) => {console.log(`ERR: ${err}`)});

}

问题是：此代码是否“错误”？如果是这样，我如何使用注释掉的操作符
publish
和
connect
实现相同的结果？我需要在这里吗

另外，我有大约15篇关于这个主题的文章/因此文章是开放的，它们似乎都没有帮助，或者我没有得到它。
如果你想确保数据在第一次调用后被缓存，那么将可观测数据存储在私有字段中，并在它有值后返回。返回值将仅在第一次解析时解析，并在后续调用时再次提供

服务/vl数据.service.ts（正文代码）

请注意，此代码取自您发布的plunk链接，而不是问题中发布的代码

private\vlu数据：可观察；
构造函数（私有http:http）{}
getVlData（）：可观察{
如果（！this.\u vlData）{
const testUrl:string='1〕http://httpbin.org/delay/3';
this.vlData=this.http.get（testUrl）
.map（（res）=>res.json（））
.catch（（err）=>Observable.throw（error.json（）.error））；
}
返回此数据；
}


一些旁注：

尽量不要将任何业务逻辑或调用放在构造函数中，这会使它们更难测试，理想情况下，您希望显式执行，而不是作为其他过程的副作用执行（例如创建您需要的服务时）
您应该考虑使用<代码> HTTPcli客< /代码>而不是<代码> http>代码>，后者被认为是过时的/不推荐的。
您应该考虑使用RXJS PIPLE运算符在“老”补丁运算符上。
您从未实际调用
subscribe
或对服务返回的可观察对象执行任何操作。@Igor（Igoresha）我在服务器内部调用subscribe，您可以从我发布的代码中看到这一点。我还从home组件调用其他订阅，正如您在plunk中看到的那样。我只是把回答记录下来，这就是我回答这个问题所需要的。也许我看错了，因为我没有看到它。我只是在第一个方法
this.vlDataService.subscribeToVlDataObservable（）中看到了这一点
@Igor-Weird，我只是仔细检查了一下这个plunk。很抱歉，我的意思是创建的可观测值，而不是它产生的值。
private _vlData: Observable<any>;

constructor(private http: Http) {}

getVlData(): Observable<any> {
    if(!this._vlData) {
        const testUrl: string = 'http://httpbin.org/delay/3';
        this._vlData = this.http.get(testUrl)
          .map( (res) => res.json() )
          .catch( (err) => Observable.throw(error.json().error) );
      }
    return this._vlData;
}