Angular2 routing wait for obtain params from url - angular2-routing

Question

I want to:
Obtain param from url
Then send http request to API with that param
If I done it undirectly via browser url box it works great but when I use router.navigate(["/users", "userName"]); it work to slow.
ngOnInit(): void {
this.sub = this._route.params.subscribe(
params => {
this.userName = params['name'];
});
this._usersService.getUser(this.userName)
.subscribe(user => this.user = user,
error => this.errorMessage = <any>error);
}
This is code inside UserComponent.
And the this._userService is sometimes done before this.sub is.
How to fix it?

Answer 1

You can use switchMap in order to switch from params observable to the observable provided by getUser().
// an observable of users
this.user$ = this._route.params
// switch to the observable provided by getUser() which queries the resource
.switchMap(params => this.getUser(params['name']))
// log error
.catch(error => {
console.log('Error occurred - ' + error.message);
// rethrow
return Observable.throw(error);
})
// share a single subscription among the subscribers so that getUser() will not be called for every subscriber
.share();
Then you can project this observable into another one that is useful for your case, for example:
// an observable of user details to be displayed on template
this.userInfo$ = this.user$.map(user => user.username + ' - ' + user.date.toISOString());
And finally you can use the observable in your template:
The user is: {{ userInfo$ | async }}
See the working sample in this PLUNKER
Full code for the UserComponent:
import { Component, OnInit } from '#angular/core';
import {ActivatedRoute} from '#angular/router';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';
#Component({
selector: 'app-user',
template: `The user is: {{ userInfo$ | async }}`
})
export class UserComponent implements OnInit {
public user$: Observable<User>;
public userInfo$: Observable<string>;
constructor(private _route: ActivatedRoute) {
}
ngOnInit() {
// an observable of users
this.user$ = this._route.params
// switch to the observable provided by getUser() which queries the resource
.switchMap(params => this.getUser(params['name']))
// log error
.catch(error => {
console.log('Error occurred - ' + error.message);
// rethrow
return Observable.throw(error);
})
// share a single subscription among the subscribers so that getUser() will not be called for every subscriber
.share();
// an observable of user details to be displayed on template
this.userInfo$ = this.user$.map(user => user.username + ' - ' + user.date.toISOString());
}
private getUser(username: string): Observable<User> {
// occasionally create error
if (username === 'error') {
return Observable.throw(new Error('Occasional error'));
}
// create a user after 300 ms
return Observable.of({username: username, date: new Date()}).delay(300);
}
}
export interface User {
username: string;
date: Date;
}