Question

我有一个角度2应用程序，并希望拦截路线事件，防止它们发生，播放动画然后继续路由。

我的想法是这个

如果我有班级

export class SomeComponent {
    constructor(private router: Router){
        router.events.subscribe(evt => {
            if(evt instanceof NavigationStart){
                //I would like to cancel the event here the first time, and then 
                //play an animation, after the animation is done, trigger the router
                //to go to the original route it wanted to.
            }
        })
    }
}

有没有办法阻止该路由器完成导航过程？

Answer 1

你可以为父路线创建一个CanActivate守卫，在那里你可以根据一些全局变量停止导航。该变量的值可能基于动画是否已经显示。

所以你可以做的是，

export class AnimationGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(HasAnimationRun){
      return true;
    }
    runAnimation(state.url);
    return false;
  }
}

runAnimation(url){
  // run animation
  // set global variable.
  // navigate to url
}

详细了解CanActivate here。

希望这会有所帮助!!

Angular 2拦截路由事件，然后稍后路由

1 个答案: