Question

我有一个名为'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调用。还有其他方法可以实现吗？

Answer 1

由于您必须返回Observable，因此您不应订阅您的方法getOrderDetails，而是映射：

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

路线防护中的API调用：Angular 4

1 个答案: