how to create a new observable subscription based on existing observable in rxjs?

Question

I need to do something as the following line in my project(from https://github.com/devyumao/angular2-busy)

ngOnInit() {
    this.busy = this.http.get('...').subscribe();
}

In my project, I am making request based on route change as the following:

ngOnInit(): void {   
    this.activatedRoute
        .params
        .map(params => params['queryString'])
        .flatMap(id => this.http.(''))
        .subscribe(result => this.data = result);   
}

It seems I need to create a new subscription every time there is a change in route. I am not sure how to do it.

I am looking for rxjs solution only (without using Promise).

Thanks!

derek

Answer 1

I would globally (in your main component for example) register on route changes this way and trigger your request in the associated callback:

this.router.events
  .filter(event => event instanceof NavigationStart)
  // or NavigationEnd
  .subscribe(event => {
    this.http.post('').subscribe();
  });

This way you subscribe once on changes.

If you want to have access to route params, you need to inject the ActivateRoute instance as well and subscribe on its params attribute.

For this, I would leverage the combineLatest method of the Observable class, like described below:

export class AppComponent {

  constructor(private router: Router, private route: ActivatedRoute) {
    Observable.combineLatest(
      this.router.events
        .filter(event => event instanceof NavigationStart),
      this.route.params
    )
    .subscribe(data => {
      const event = data[0];
      const params = data[1];
      (...)
    });
  }
}

Don't forget to add this:

import 'rxjs/add/observable/combineLatest';