Question

我正在使用Bable for ES6和webpack。我在angular 1.x.x上并构建了一个应用程序。直到现在我没有遇到任何问题。我希望有一个功能，我可以跟踪所有的路线变化。我正在使用UI-Router。问题是$stateChangeStart无论如何都不会被触发。代码如下所述。

/*All includes are taken care of. Please look at the run method*/

angular.module('chpApp', [
        uirouter,
        angular_animate,
        uibootstrap,
        formly,
        formlyBootstrap,
        ngMessages,
        angularLoadingBar,
        'ngNotificationsBar',
        'jkuri.datepicker',
        'LocalStorageModule',
        'ncy-angular-breadcrumb',
        'mgo-angular-wizard',
        'luegg.directives',
        'ngToast',
        'ui.mask',
        /*Application Modules*/
        angularnvd3,
        chpConstants,
        menu,
        header,
        breadcrumb,
        auth,
        dashboard,
        programs,
        device
    ])
    .run(['$rootScope', function($rootScope) {
        $rootScope.$on('$stateChangeStart', () => {
            console.log('lol')
        })
    }])
    .config(routing);

请让我知道我做错了什么，因为状态正在改变，但$stateChangeStart事件永远不会被触发。 run方法是我与$stateChangeStart听众联系的地方。

我猜它与ES6有关，我无法找到任何参考。感谢。

Answer 1

我遇到了类似的问题，并最终意识到stateChange* 1.0中默认情况下已弃用并禁用了ui-router个事件。我正在使用1.0.0-alpha0。现在可以使用转换挂钩来实现这些事件提供的功能。这在1.0 alpha的发行说明中有所介绍，可在此处阅读：https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer 2

扩展Eoins的答案，您可以在组件控制器中使用$ transitions上的钩子，如下所示

        $transitions.onStart({}, ()=>{
            $log.log('In start')
        });
        $transitions.onFinish({}, ()=>{
            $log.log('In finish')
        });

https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer 3

扩展其他答案，您可以手动激活旧版0.2。* stateChange-events。将以下模块保存为ui-router-polyfill-wrapper.js：

'use strict';

import uiRouter from 'angular-ui-router';
import 'angular-ui-router/release/stateEvents';

let module = angular
    .module('ui-router-polyfill-wrapper', [
        uiRouter,
        'ui.router.state.events',
    ]);

export default module;

然后将require('./ui-router-polyfill-wrapper').default.name代替require('angular-ui-router').name放入角度应用模块依赖关系数组中。

在UI-Router ES6中状态更改时，$ stateChangeStart未被触发？

3 个答案: