通过带有 Observable 的 Resolve 捕获 404 的具有 Http 数据服务的 Angular2 路由器

Question

在我的 resolve guard 中，我从特定的 id.

获得了一个针对 return 用户的 JSON 的 Http Observable

如果 id 不存在，我想捕获错误并重新路由到用户概览。我见过用 Promise 解决这个问题的代码，但不是用 Observable 解决的。 我想看看有 Observable 的解决方案！

目前我得到一个 "EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://127.0.0.1:3000/users/191" 因为用户 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);
        });
    }
}

通过带有 Observable 的 Resolve 捕获 404 的具有 Http 数据服务的 Angular2 路由器

Angular2 router with Http data service through a Resolve with Observable catching 404

angular

rxjs

angular2-routing

angular2-services

angular2-resolve