如何根据rxjs中现有的observable创建一个新的可观察订阅？

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';

Answer 2

Actually, you can subscribe to the ajaxCallObservable in the chain. :)

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