当 UI-Router ES6 中的状态更改时，$stateChangeStart 不会被触发？

Posted 2023-02-22

【中文标题】当 UI-Router ES6 中的状态更改时，$stateChangeStart 不会被触发？

【英文标题】：$stateChangeStart not being fired when state Changes in UI-Router ES6?

【发布时间】：2016-06-05 13:16:22

【问题描述】：

我正在为 ES6 和 webpack 使用 Bable。我正在使用 angular 1.x.x 并构建一个应用程序。直到现在我没有遇到任何问题。我想要一个可以跟踪所有路由更改的功能。我正在使用 UI 路由器。问题是$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 有关，但我找不到任何参考。 谢谢。

【问题讨论】：

试试 $rootScope.$on('$locationChangeStart', ...)

您为什么不将所有这些内容剥离到minimal reproducible example 并与我们分享？

@FranePoljak Dude 我正在使用 UI-Router，所以请在将其标记为负面之前通读一遍！

@iH8 你可以看看代码中的run方法。抱歉包含这么多。我会编辑它。

投反对票的不是我 :)

【参考方案1】：

扩展其他答案，您可以手动激活旧版 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 放入 Angular 应用模块依赖数组中。

【参考方案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

【参考方案3】：

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

【讨论】：

你能使用它吗？就像它对你有用吗，你能给我一些代码吗？我正在使用“^1.0.0-alpha0”

我还是不明白为什么你不能使用 $location 服务的 $locationChangeStart 事件？

@Eoin 谢谢，遇到了同样的问题，documentation 没有提及任何内容。我现在在文档中添加了一行提到这一点，以节省人们一些时间

答案中的链接断开