chained Rx calls called multiple times

问题:

I need to execute http get calls sequentially. This How to chain Http calls in Angular2 has a very good explanation of how to do that. However whenever I revisit the route my observables are called 2 times more after every visit. So many repeat http calls is not good. How do I make sure that calls are made only once.

unsubscribing on destroy does not seem to help either.

ngOnInit() {
    let counter1 = 0, counter2 = 0;
    console.log('MyBiraComponent ngOnInit');
    let uk = this.us.get();
    this.u = uk.map(person => {
        console.log('line 47, Person Id: ', ++counter1);
        return person.id;
    }).flatMap(id => {
        console.log('line 48 - Person id: ', person.id);
        return this.bu.get(id);
    }).subscribe(res => {
        console.log(res);
        });
}




ngOnDestroy() {
    this.u.unsubscribe();
    console.log('MyBiraComponent Destroyed');
  }

first visit to route

2nd visit to route

3rd visit to route