title: share() vs ReplaySubject: Which one, and neither works
body: <p>I'm trying to implement short-term caching in my Angular service -- a bunch of sub-components get created in rapid succession, and each one has an HTTP call.  I want to cache them while the page is loading, but not forever.</p>
  
  <p>I've tried the following two methods, neither of which have worked.  In both cases, the HTTP URL is hit once for each instance of the component that is created; I want to avoid that -- ideally, the URL would be hit once when the grid is created, then the cache expires and the next time I need to create the component it hits the URL all over again.  I pulled both techniques from other threads on StackOverflow.</p>
  
  <p><strong>share() (in service)</strong></p>
  
  <pre><code>getData(id: number): Observable&lt;MyClass[]&gt; {
      return this._http.get(this.URL)
          .map((response: Response) =&gt; &lt;MyClass[]&gt;response.json())
          .share();
  }
  </code></pre>
  
  <p><strong>ReplaySubject (in service)</strong></p>
  
  <pre><code>private replaySubject = new ReplaySubject(1, 10000);
  getData(id: number): Observable&lt;MyClass[]&gt; {
      if (this.replaySubject.observers.length) {
          return this.replaySubject;
      } else {
          return this._http.get(this.URL)
              .map((response: Response) =&gt; {
                  let data = &lt;MyClass[]&gt;response.json();
                  this.replaySubject.next(data);
                  return data;
              });
      }
  }
  </code></pre>
  
  <p><strong>Caller (in component)</strong></p>
  
  <pre><code>ngOnInit() {
      this.myService.getData(this.id)
          .subscribe((resultData: MyClass[]) =&gt; {
              this.data = resultData;
          },
          (error: any) =&gt; {
              alert(error);
          });
  }
  </code></pre>
  
  <p>There's really no need to hit the URL each time the component is created -- they return the same data, and in a grid of rows that contain the component, the data will be the same.  I <em>could</em> call it once when the grid itself is created, and pass that data into the component.  But I want to avoid that, for two reasons: first, the component should be relatively self-sufficient.  If I use the component elsewhere, I don't want to the parent component to have to cache data there, too.  Second, I want to find a short-term caching pattern that can be applied elsewhere in the application.  I'm not the only person working on this, and I want to keep the code clean.</p>