Angular2 маршрутизатор с обслуживанием данных Http через Resolve с Observable ловли 404

Question

В моей решимости охраннике я получаю Http Наблюдаемого вернуть JSON из пользователя от конкретного id.

Я хочу поймать ошибку и перенаправить к обзору пользователей, если id не существует. Я видел код, который решает это с обещанием, но не с наблюдаемым. Я хотел бы видеть решение с наблюдаемым!

В настоящее время я получаю "EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://127.0.0.1:3000/users/191", так как пользователь 191 не exsist.

Вот мой код:

Resolve:

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router'; 
import { UsersService } from '../shared/services/users.service'; 
import { User } from '../shared/models/user'; 

@Injectable() 
export class UserResolveService implements Resolve<User> { 
    user: User; 
    constructor(private service: UsersService) {} 
    resolve(route: ActivatedRouteSnapshot) { 
     let id = route.params['id']; 
     // getUser returns an Http Observable 
     return this.service.getUser(id); 

     // ERROR HANDLING IF id DOES NOT EXIST 
     // REROUTE TO USER OVERVIEW 

     // A TUTORIAL WITH PROMISE USES FOLLOWING CODE 
     // .then(user => { 
     // if (user) { 
     //  return user; 
     // } else { 
     // // navigate the user back to the users page 
     // this.router.navigate(['/users']); 
     // return false; 
     // } 
     // }); 
    } 
} 

UsersService GetUser (ID):

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { environment } from "../../../environments/environment"; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class UsersService { 
    private _url = environment.RAILS_API_BASE_URL+"/users"; 

    constructor(private http :Http) { } 
    ... 
    getUser(userId){ 
     return this.http.get(this.getUserUrl(userId)) 
      .map(res => res.json())    
    } 
    ... 
    private getUserUrl(userId){ 
     return this._url + "/" + userId; 
    } 
} 

user.routing.ts:

import { Routes, RouterModule } from '@angular/router'; 
import { ModuleWithProviders } from '@angular/core'; 

import { UsersResolveService } from './users-resolve.service'; 
import { UserResolveService } from './user-resolve.service'; 

import { UsersComponent } from './users.component'; 
import { UserDetailComponent } from './user-detail.component'; 
import { UserSectionComponent } from './user-section.component'; 

const userRoutes: Routes = [ 
    { 
    path: '', 
    component: UserSectionComponent, 
    children: [ 
     { 
      path: ':id', 
      component: UserDetailComponent, 
      resolve: { 
       user: UserResolveService 
      } 
     } 
    ] 
    }  
] 

export const UsersRouting: ModuleWithProviders = RouterModule.forChild(userRoutes) 

UserDetailComponent:

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router' 
import { UsersService }  from '../shared/services/users.service'; 
import { User }    from '../shared/models/user'; 

@Component({ 
    templateUrl: './user-detail.component.html', 
    styleUrls: ['./user-detail.component.scss'] 
}) 

export class UserDetailComponent implements OnInit { 
    user: User; 
    constructor(private route: ActivatedRoute) { } 
    ngOnInit() { 
    // OLD CALL without resolve 
    // let id = this.route.snapshot.params['id']; 
    // this.user = this.usersService.getUser(id) 
    // .subscribe((res) => {this.user = res;}, error => {console.log(error)}); 

    // NEW CALL WITH RESOLVE 
    this.route.data.forEach((data: { user: User }) => this.user = data.user); 
    } 
} 

Answer 1

Вы можете использовать оператор catch, чтобы быть в состоянии обрабатывать ошибку, не подписавшись себя:

@Injectable() 
export class UserResolveService implements Resolve<User> { 
    user: User; 
    constructor(private service: UsersService) {} 
    resolve(route: ActivatedRouteSnapshot) { 
     let id = route.params['id']; 
     return this.service.getUser(id) 
     .catch(err => { 
      this.router.navigate(['/users']); 
      return Observable.of(false); 
     }); 
    } 
}