Prevent duplicate HTTP requests in Angular 2 API-driven tree-view

I would cache the data per node using the following approach:

getData() {
  if (this.cachedData) {
    return Observable.of(this.cachedData);
  } else {
    return this.http.get(...)
          .map(res => res.json())
          .do((data) => {
            this.cachedData = data;
          });
  }
}

The "problem" with the distinctUntilChanged is that you need to use the same data flow. But it's not the case in your case since you execute several requests on different data flow...

See this question for more details:

• Angular 2, best practice to load data from a server one time and share results to components