Question

在我的决心中，我得到一个Http Observable，以从特定的id返回用户的JSON。

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

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

1 个答案: