Angular 1.5 组件路由器 $canActivate：在没有数据的情况下访问下一个路由并重新路由

Question

我实际上在使用 $canActivate 时遇到了三个问题（也请查看下面的代码以更好地理解这些问题）：

1. 当点击<a ng-link="['MachineDetails', { id: 'c6bd76947fc0' }]</a> 时，我无法从 $canActivate (url 并且路线还没有改变，所以也无法通过 注入 $location 或注入 $rootRouter)
2. 我无法找到将数据从 $canActivate 传递到 控制器。

3. 我无法从 $canActivate 重新路由（通过使用 $rootRouter.navigate()）。

   import template from './machine-details.html';
   
   export const machineDetailsComponent = {
       template: template,
       controller: machineDetailsController,
       $canActivate: canActivate,
   };
   
   /*@ngInject*/
   function machineDetailsController (machineDetailsService) {
       this.$routerOnActivate = function (nextRoute) {
           // do something;
       };
   }
   
   /*@ngInject*/
   function canActivate ($q, $rootRouter, machineDetailsService) {
       const deferred = $q.defer();
       /**
        * ISSUE 1:
        * if I get here via ng-link, then $rootRouter.lastNavigationAttempt 
        * shows the route I was on when clicking, however if I type the url manually 
        * (or refresh) I get something I can use which is for example '/machineDetails/c6bd76947fc01'
        **/ 
       const machineId = $rootRouter.lastNavigationAttempt.split('/')[2];
   
       machineDetailsService.getMachineDetailsData(machineId)
           .then(successHandler, errorHandler);
   
       /**        
        * ISSUE 2:
        * 'result' does not make its way into controller so I need to call
        * machineDetailsService.getMachineDetailsData again in controller...
        **/ 
       function successHandler (result) {
           deferred.resolve(); // passing on result has no affect
       }
   
       function errorHandler (error) {
           deferred.resolve(error);
           /** 
            * ISSUE 3: 
            * $rootRouter.navigate doesn't work here (and controller is 
            * never called) so how do I cause system to go back to list view ?
           **/ 
           // $rootRouter.navigate(['ListView']);
       }
   
       return deferred.promise;
   }
   

   以上代码是我用 ES6 编写的组件定义。

Answer 1

1. 您可以在$canActivate 挂钩中注入$nextInstruction，然后您可以通过$nextInstruction.params 访问您的参数。

   function canActivate($nextInstruction, $q, $rootRouter, machineDetailsService) {
     const machineId = $nextInstruction.params.id;
   }
   

2. 我遇到了同样的问题，但找不到将数据从 $canActivate 挂钩传递到控制器的任何解决方案。

3. 您可以通过$rootRouter.navigate(['/ListView']) 导航到ListView。注意正斜杠。这需要指定，因为您的 ListView 不是子路由。