CanDeactivate Guard 中的 Angular 2 Router 3.0 未来路由答案

【问题标题】：Angular 2 Router 3.0 Future Route in CanDeactivate GuardCanDeactivate Guard 中的 Angular 2 Router 3.0 未来路由
【发布时间】：2016-12-15 17:29:28
【问题描述】：

我已经为我的 Angular 应用编写了一个 CanDeactivate 守卫，它非常基础：

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
    canDeactivate(component: CanComponentDeactivate): Promise<boolean> | boolean {
        return component.canDeactivate ? component.canDeactivate() : true;
    }
}

它只是等待一个 Promise 解析为 true/false，或者立即返回 true/false。然而，我想做的是在放置警卫的组件中检查未来路线。例如，假设我有三个路由，/list、/shop、/checkout，我将canDeactivate 守卫放在/shop 上。我想要它在那里，因为如果他们离开那个组件，我想问他们是否确定要离开。但如果他们要离开去结账，我不想问他们是否确定。我会立即向canDeactivate 守卫返回一个真值。但是，如果他们要返回 /list，我可能会问他们是否确定要将商品留在购物车中。

我查了几个问题，包括 this one，并通读了 Angular site 上的文档，但没有找到我要找的东西。

我的想法是，在实际组件中，在canDeactivate 方法中，我将能够检查路由器或未来路由或类似的东西，看看它是什么，看看我是否想立即返回守卫的话是真的。

对此有何想法？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

CanDeactivate 接口中有一个神奇、神秘、可选的参数，它可以准确地为您提供所需的参数...nextState

interface CanDeactivate<T> { 
  canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, 
  currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): 
  Observable<boolean>|Promise<boolean>|boolean
}

SRC :: https://angular.io/api/router/CanDeactivate

【讨论】：