Angular 1.5 component router $canActivate: 访问下一条路由，无数据时重新路由

Question

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

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

我无法从 $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

你可以在你的 $canActivate 钩子中注入 $nextInstruction 然后你可以通过 $nextInstruction.params.

访问你的参数

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

我运行遇到了同样的问题，但找不到任何解决方案来将数据从 $canActivate 挂钩传递到控制器。
您可以通过 $rootRouter.navigate(['/ListView']) 导航到 ListView。注意正斜杠。需要指定，因为您的 ListView 不是子路由。

Angular 1.5 component router $canActivate: 访问下一条路由，无数据时重新路由

Angular 1.5 component router $canActivate: accessing next route and rerouting in case of no data

angularjs

angular-component-router