Observable catch와 함께 해결을 통한 HTTP 데이터 서비스를 사용하는 Angular2 라우터 404

Question

내 문제를 해결하기 위해 특정 id에서 사용자의 JSON을 반환하도록 Http Observable을 얻고 있습니다.

id이없는 경우 오류를 catch하여 사용자 개요로 리디렉션하고 싶습니다. 나는 Promise로 그것을 해결하지만 Observable로는 해결할 수없는 코드를 보았습니다. Observable과 함께 해결책을보고 싶습니다!

현재 사용자 191은 exsist가 아니기 때문에 "EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://127.0.0.1:3000/users/191"이 표시됩니다.

해결 :

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