Javascript Angular2-使组件等待服务完成数据提取，然后呈现数据

我在实现一个只加载一次数据（gyms数组）然后允许所有其他组件使用它的服务时遇到了问题，而不需要发出其他HTTP请求

如果用户从标题页开始加载所有数据，那么我的应用程序工作正常，但是当我转到特定的详细信息页（…/gym/1）并重新加载页面时，对象还不在服务数组中。如何使尝试访问服务阵列的组件等待数据加载？更具体地说，如何延迟GymComponent中对gymService.getGym（1）的调用，直到getAllGymsFromBackEnd（）函数填充完数组

我读过关于解析器的书，但我的修修补补毫无结果

任何帮助都将不胜感激

这是我正在编写的代码：

服务：

import {Injectable} from "@angular/core";
import {Gym} from "../objects/gym";
import {BaseService} from "./base.service";
import {Http, Response} from "@angular/http";
import {HttpConstants} from "../utility/http.constants";

@Injectable()
export class GymService extends BaseService {

   private gyms: Gym[] = [];

   constructor(protected http: Http, protected httpConstants: HttpConstants) {
      super(http, httpConstants);
      this.getAllGymsFromBackEnd();
   }

   getAllGymsFromBackEnd() {
      return super.get(this.httpConstants.gymsUrl).subscribe(
         (data: Response) => {
            for (let gymObject of data['gyms']) {
               this.gyms.push(<Gym>gymObject);
            }
         }
      );
   }

   getGyms() {
      return this.gyms;
   }

   getGym(id: number) {
      return this.gyms.find(
         gym => gym.id === id
      )
   }
}

---

您也可以使用

Resolver

。在此处检查或使用“可观察”。因此，

私人健身房：健身房将变成
私人健身房$：可观察，并在模板中，使用
async
管道来获取数据。
您的服务应该公开一个可以订阅的可观察对象。例如，可以使用
ReplaySubject
作为缓存。使
getGyms
return
Observable
。感谢您的回复，我按照您的建议进行了更改。你能看看我做得对吗？我也不知道如何实现getGym（id）函数并在组件中使用它，你能帮我一下吗？在得到答案后不要更改问题。如果你想知道你是否做对了，测试一下！是的，我测试了描述中的代码，它运行正常（除了getGym（id）），我只是想知道实现是否可以更简单/更好。如果您有您认为可以改进的工作代码，在完成所有实现后，请参阅。
import {Component, OnDestroy, AfterViewInit, OnInit} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs";
import {Gym} from "../../objects/gym";
import {GymService} from "../../services/gym.service";
declare var $:any;

@Component({
   selector: 'app-gym',
   templateUrl: './gym.component.html',
   styleUrls: ['./gym.component.css']
})
export class GymComponent implements OnInit, OnDestroy, AfterViewInit {

   private subscription: Subscription;
   private gym: Gym;

   constructor(private activatedRoute: ActivatedRoute,
            private gymService: GymService
   ) {}

   ngOnInit(): void {
      this.subscription = this.activatedRoute.params.subscribe(
         (param: any) => {
            this.gym = this.gymService.getGym(parseInt(param['id']));
         }
      );
   }

   ngAfterViewInit(): void {
      $( document ).ready(function() {
         $('.carousel').carousel();
      });
   }

   ngOnDestroy(): void {
      this.subscription.unsubscribe();
   }
}