Angular2路由等待來自URL

Question

獲得PARAMS我想：

1. 從URL
獲取PARAM
2. 然後發送HTTP請求API與PARAM

如果我通過瀏覽器undirectly做到了url框它工作的很好，但是當我使用router.navigate(["/users", "userName"]);它工作緩慢。

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); 
} 

這是UserComponent內部的代碼。

而this._userService有時在this.sub之前完成。

如何解決？

Answer 1

您可以使用switchMap以便從params切換到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(); 

然後你就可以預測這可觀察到另外一個，是你的情況下非常有用，例如：

// an observable of user details to be displayed on template 
this.userInfo$ = this.user$.map(user => user.username + ' - ' + user.date.toISOString()); 

最後，你可以使用觀察到在你的模板：

The user is: {{ userInfo$ | async }} 

查看此工作示例PLUNKER

完整代碼e 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; 
}