Angular: How to Subscribe to Multiple Parts of Observable inside Service with Router Events

Question

In my navigation service, I would like to subscribe to the current selected route url and data in one subscription.

To subscribe to the route url, I would write:

constructor( router: Router, activatedRoute: ActivatedRoute ) {
    router.events.pipe(
        filter( event => event instanceof NavigationEnd ),
        map( () => activatedRoute ),
        map( r => {
            while ( r.firstChild ) {
                r = r.firstChild;
            }
            return r;
        } ),
        switchMap( route => route.url ),
    ).subscribe( u => {
        // ... do something with u
    } );
}

Now I want to also subscribe to the data-Observable of the current route. How can I split the observable to an url-part and a data-part and subscribe once for both observables?

I tried zip(), partition(), combineLatest() but did not succeed. Or should I use concatMap() ?

Answer 1

use combine latest to unite 2 streams of url and data

switchMap(route => combineLatest([route.url, route.data]))