问路由保护中的API调用: Angular 4
EN

Stack Overflow用户

提问于 2018-02-20 01:44:41

回答 1查看 642关注 0票数 1

我有一个名为'orderDetails‘的组件，我正在尝试添加一个路由守卫，以便仅在已下订单的情况下才呈现该组件，即通过：

status = 'PLACED'

我试着这样做：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { OrderService } from './order.service';    

@Injectable()
export class RouteGuard implements CanActivate {

  orderId = 12345;  // mock id

  constructor(private router: Router, private orderService: OrderService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     this.orderService.getOrderDetails(this.orderId).subscribe(data) => {
       if (data.status !== 'PLACED') { return false; } else { return true; }
     }
  }

}

但是，这种方法似乎不起作用，可能是因为我在canActivate方法中进行了一个API调用。有没有其他方法来实现这一点？

angular

回答 1

Stack Overflow用户

发布于 2018-02-20 01:47:45

因为你必须返回一个Observable，所以你不应该订阅你的方法getOrderDetails，而应该使用map：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.orderService.getOrderDetails(this.orderId).map((data) => {
       return data.status === 'PLACED';
    }).catch(error => {
        return Observable.of(false);
    });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48871526

复制

相似问题

问路由保护中的API调用: Angular 4
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问路由保护中的API调用: Angular 4EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问路由保护中的API调用: Angular 4
EN