Javascript angular ui路由器$stateChangeStart事件未在angular Webpack ES2015组件构建中触发

我试图在angular中实现前端JWT身份验证，但是$stateChangeStart事件没有在状态之间触发。我使用的是用es2015编写的基于组件的体系结构，并与Webpack捆绑在一起

在状态之间切换时，在run块中设置的$stateChangeStart侦听器不会启动

app.js是应用程序的入口点。我将其他角度模块作为组件

导入“normalize.css”；
从“/app.directive”导入{appDirective}；
//角度相关性
从“angular”导入angular；
从“角度ui路由器”导入uiRouter；
从“角度动画”导入ngAnimate；
//JWT依赖项
从“角度jwt”导入角度jwt；
从“角度存储”导入角度存储；
//导入共享服务
从“./services/services”导入{services}；
//导入组件
从“./components/signup/signup”导入{signup}；
从“./components/login/login”导入{login}；
从“./components/dashboard/dashboard”导入{dashboard}；
角度模块（'app'[
uiRouter，
阿尼马特，
angularJwt，
角度存储，
服务名称，
signup.name，
login.name，
dashboard.name
])
.directive（'app'，appDirective）
//配置$httpInterceptors以附加JWT令牌
.run（函数（$rootScope，$state，Auth）{
$rootScope.$on（“$stateChangeSuccess”，函数（e，to）{
//检查身份验证，但函数不执行
});
});

下面是一个组件入口点文件的示例。我为这些文件中的每个组件设置了状态

import {dashboardDirective} from './dashboard.directive';
import angular from 'angular';
import uiRouter from 'angular-ui-router';

export const dashboard = angular.module('dashboard', [uiRouter])
  .config(($stateProvider) => {
    $stateProvider.state('dashboard', {
      url: '/dashboard',
      template: '<dashboard></dashboard>',
      authenticate: true
    });
  })
  .directive('dashboard', dashboardDirective);

从“/dashboard.directive”导入{dashboardDirective}；
从“angular”导入angular；
从“角度ui路由器”导入uiRouter；
export const dashboard=angular.module（'dashboard'，[uiRouter]）
.config（（$stateProvider）=>{
$stateProvider.state（'dashboard'{
url:“/dashboard”，
模板：“”，
验证：true
});
})
.指令（“仪表板”，仪表板指令）；

---

使用主应用程序模块上的.run块设置状态更改的侦听器与其他应用程序体系结构配合得很好，但我似乎无法理解它为什么不在这里工作。

这应该会触发

$stateChangeStart

侦听器运行

$stateProvider.state('dashboard', {
  url: '/dashboard',
  template: '<dashboard></dashboard>',
  authenticate: true,
  resolve: {
    data: function($q) {
      var deferred = $q.defer();

      setTimeout(function() {
        deferred.resolve();
      }, 1000);

      return deferred.promise;
    }
  }
});

$stateProvider.state（'dashboard'）{
url:“/dashboard”，
模板：“”，
对,，
决心：{
数据：函数（$q）{
var deferred=$q.deferred（）；
setTimeout（函数（）{
延迟。解决（）；
}, 1000);
回报。承诺；
}
}
});

这将触发运行

$stateChangeStart

侦听器

$stateProvider.state('dashboard', {
  url: '/dashboard',
  template: '<dashboard></dashboard>',
  authenticate: true,
  resolve: {
    data: function($q) {
      var deferred = $q.defer();

      setTimeout(function() {
        deferred.resolve();
      }, 1000);

      return deferred.promise;
    }
  }
});

$stateProvider.state（'dashboard'）{
url:“/dashboard”，
模板：“”，
对,，
决心：{
数据：函数（$q）{
var deferred=$q.deferred（）；
setTimeout（函数（）{
延迟。解决（）；
}, 1000);
回报。承诺；
}
}
});

要使用状态更改事件，您必须重新生成包含stateEvents.ts的库。它们已被弃用，最好使用这些函数。有一些语法上的糖分使这变得容易

.state('home', {
    url: '^/home/',
    onStart: ['$transition', '$state', function( transition, state){
    //your handling of this event
    });

---

你的帖子是TS，希望你能翻译。您可以了解更多有关如何利用状态生命周期来使用状态更改事件的信息，这些事件必须包含stateEvents.ts才能重建库。它们已被弃用，最好使用这些函数。有一些语法上的糖分使这变得容易

.state('home', {
    url: '^/home/',
    onStart: ['$transition', '$state', function( transition, state){
    //your handling of this event
    });

你的帖子是TS，希望你能翻译。您可以了解有关如何利用状态生命周期的更多信息