在Angular 4中对http请求使用resolve时出错答案

【问题标题】：Error when using resolve with http requests in Angular 4在Angular 4中对http请求使用resolve时出错
【发布时间】：2018-01-17 15:24:47
【问题描述】：

我正在尝试使用 resolve 在我的 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 的正确信息

【问题讨论】：

看起来不错。你在哪里订阅？
@echonax 我无法订阅，因为我要返回一个对象
您正在返回一个 Observable，其响应是一个 Object。 this.http.get 返回一个 observable
@echonax 如果我尝试在组件文件中订阅它，我会收到'subscribe' doesn't exist on type 'Object' 的错误。这是我在组件文件中使用的代码this.route.data.subscribe((data: Data) => { this.loginState = data['isLoggedin']; this.loginState.subscribe((response: any) => { console.log(response); }, (error: any) => { console.log(error) }) });
这是一个打字检查问题。从方法返回类型中删除 | Object 和 | Promise<Object> 部分。如果您要添加代码，请将其添加到您的问题中，请不要在评论部分中。

标签： javascript angular observable

【解决方案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'];
    });
}

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

【讨论】：