javascript - 在 Angular 4 中对 http 请求使用解析时出错

Question

我正在尝试在我的 Angular 4 项目中使用解析来预取 http 请求，但只要有错误响应，它就会抛出 ERROR Error: Uncaught (in Promise): Response with status节点服务器。当有像 200 这样的成功 http 代码时，代码可以正常工作。这是我正在处理的 resolve 代码:

@Injectable()
export class LoginResolverService implements Resolve<Object> {

  constructor(private http: Http) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Object> | Promise<Object> | Object {
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.get('http://localhost:3000/login_check', {headers: headers})
      .map((response: Response) => {
        return response.json();
      }).catch((error: Response) => Observable.throw(error.json()));
  }
}

组件文件代码:

loginState: Observable<Object>;
  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.route.data.subscribe((data: Data) => {
      this.loginState = data['isLoggedin'];
      this.loginState.subscribe((response: any) => {
        console.log(response);
      }, (error: any) => {
        console.log(error)
      })
    });
  }

路线相关代码:

{path:'notifications'，loadChildren:'./notifications/notifications.module#NotificationsModule'，resolve:{isLoggedin:LoginResolverService}}

请帮我解决这个问题，因为我找不到任何有关使用 resolve 和 http 的正确信息

Answer 1

在我的解析器服务中，我调用单独的数据服务来实际获取数据:

resolve(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<IProduct> {
    let id = route.paramMap.get('id');
    if (isNaN(+id)) {
        console.log(`Product id was not a number: ${id}`);
        this.router.navigate(['/products']);
        return Observable.of(null);
    }
    return this.productService.getProduct(+id)
        .map(product => {
            if (product) {
                return product;
            }
            console.log(`Product was not found: ${id}`);
            this.router.navigate(['/products']);
            return null;
        })
        .catch(error => {
            console.log(`Retrieval error: ${error}`);
            this.router.navigate(['/products']);
            return Observable.of(null);
        });
}

然后在组件中:

ngOnInit(): void {
    this.product = this.route.snapshot.data['product'];
}

就是这样!

或者，如果您希望解析的数据属性在不更改路由的情况下发生变化(不包括用户对该数据的编辑)，那么您可以使用:

ngOnInit(): void {
    this.route.data.subscribe(data => {
         this.product = data['product'];
    });
}

路由器本身调用解析器并处理订阅。所以你不必这样做。