ui-router $transitions 钩子不会在浏览器重新加载时被调用答案

【问题标题】：ui-router $transitions hooks not getting called on browser reloadui-router $transitions 钩子不会在浏览器重新加载时被调用
【发布时间】：2017-06-17 15:29:52
【问题描述】：

我正在使用 ui-router 1.0.3 在 Angular 1.5.8 中制作应用程序。 Ui 路由器的钩子很棒，但 它们不适用于浏览器重新加载。

这是我用于注册状态的配置块：

(function(app) {
    'use strict';
    app.config(configFn);

    configFn.$inject = ['$stateProvider'];

    function configFn($stateProvider) {
        $stateProvider
            .state('login', {
                url: '/login',
                component: 'loginComponent'
            })
            .state('selfcare', {
                url: '/',
                component: 'selfCareComponent',
                abstract: true
            })
            .state('selfcare.dashboard', {
                url: 'dashboard',
                component: 'dashboardComponent'
            })
            .state('selfcare.appHome', {
                url: 'appHome/:id',
                component: 'appHomeComponent'
            })
            .state('selfcare.serviceHome', {
                url: 'serviceHome/:id',
                component: 'serviceHomeComponent'
            })
    }

})(angular.module('selfcare'));

以下是用于注册转换钩子的运行块：

(function(app) {
    'use strict';
    app.run(runFn);

    runFn.$inject = ['$rootScope', '$transitions' ,'$localStorage'];

    function runFn($rootScope, $transitions,  $localStorage) {

        $transitions.onStart({to:'**'}, function(transtion){
            $rootScope.ngProgress.start();
        })

        $transitions.onSuccess({to:'**'}, function(transtion){
            $rootScope.ngProgress.complete();
        })

       $transitions.onBefore({to:'login'}, function(transtion){
            if($localStorage.isLoggedIn > Date.now()){
                return transtion.router.stateService.target('selfcare.dashboard');
            }
        })

       $transitions.onBefore({to:'selfcare.**'}, function(transtion){
            if(!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()){
                $localStorage.$reset();
                return transtion.router.stateService.target('login');
            }
        })
    }

})(angular.module('selfcare'));

我无法弄清楚我在哪里做错了。一旦应用程序稳定并正常工作，就会调用钩子，但在浏览器重新加载时，我可以打开任何 url，并且不会调用任何钩子。

任何帮助将不胜感激。谢谢

【问题讨论】：

您粘贴了两个配置块。请粘贴运行块。
@georgeawg 对不起，现在粘贴

标签： javascript angularjs routing angular-ui-router

【解决方案1】：

我以某种方式设法完成了所需的操作，但我不知道这是否是最好的方法。我想在运行块中编写转换。

作为钩子回调参数的Transition对象提供了一个injector，可用于在应用程序的config块中获取运行时服务。

（我们也可以在config块中注入$injector）

(function(app) {
    'use strict';
    app.config(configFn);

    configFn.$inject = ['$transitionsProvider'];

    function configFn($transitionsProvider) {

        $transitionsProvider.onStart({ to: '**' }, function(transtion) {
            transtion.injector().get('$rootScope').ngProgress.start();
        })

        $transitionsProvider.onSuccess({ to: '**' }, function(transtion) {
            transtion.injector().get('$rootScope').ngProgress.complete();
        })

        $transitionsProvider.onBefore({ to: 'login' }, function(transtion) {
            var $localStorage = transtion.injector().get('$localStorage');
            if ($localStorage.isLoggedIn > Date.now()) {
                return transtion.router.stateService.target('selfcare.dashboard');
            }
        })

        $transitionsProvider.onBefore({ to: 'selfcare.**' }, function(transtion) {
            var $localStorage = transtion.injector().get('$localStorage');
            if (!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()) {
                $localStorage.$reset();
                return transtion.router.stateService.target('login');
            }
        })
    }

})(angular.module('selfcare'));

【讨论】：