title: Store and make available XHR'd data to multiple components in Angular (2/4+)
body: <p>I have a backend that I can fetch 'Mission' objects from. I have a class called MissionService.</p>
  
  <p>The angular.io hero tutorial suggests the MissionService should have a getMissions method:</p>
  
  <pre><code>getMissions(): Promise&lt;Mission[]&gt; {
      return this.http.get(this.missionsUrl)
          .toPromise()
          .then(function(response) {
              return response.json() as Mission[]
          })
          .catch(this.handleError);
  }
  </code></pre>
  
  <p>I have multiple components that want to access my missions. The angular.io tutorial seems to suggest I should import the MissionService in their constructors, and do:</p>
  
  <pre><code>export class MissionsComponent implements OnInit {
  
      missions: Mission[];
  
      constructor(
          private missionService: MissionService
      ){}
  
      getMissions(): void {
          this.missionService.getMissions()
              .then(missions =&gt; {
                  this.missions = missions;
                  this.doSomething();
          });
      }
  
      ngOnInit(): void {
          this.getMissions();
      }
  }
  </code></pre>
  
  <p>The problem I'm facing, is that this means, every component I want to use my missions in, ends up having its own instance of this.missions, which is potentially different to the this.missions of other components. It also means that I need to wait for the async call to complete every time I want to access my missions in a component. It also means I need to mess around with calling getMissions() in each component.</p>
  
  <p>So, isn't the suggested approach a pretty bad one?</p>
  
  <p>Wouldn't it be better to have a single, global this.missions field? This way, I could programmatically update my missions when I need to (e.g. user clicks refresh button).</p>
  
  <p>How should I go about doing this?</p>