$ stateChangeStart non viene attivato quando lo stato cambia in UI-Router ES6?

Question

Sto usando Bable per ES6 e webpack. Sono su 1.x.x angolare e sulla costruzione di un'applicazione. Fino ad ora non ho riscontrato alcun problema. Voglio avere una funzionalità in cui posso tenere traccia di tutte le modifiche al percorso. Sto usando UI-Router. Il problema è che $stateChangeStart non viene comunque attivato. Il codice è indicato di seguito.

/*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); 

Fatemelo sapere che cosa ho MA facendo male perché lo stato è sempre cambiato, ma l'evento $stateChangeStart non viene mai attivato. Il metodo run è il punto in cui mi sto collegando al listener $stateChangeStart.

Immagino che abbia qualcosa a che fare con ES6 e non sono in grado di trovare alcun riferimento. Grazie.

Answer 1

Ho avuto un problema simile e alla fine ho realizzato che gli eventi stateChange* sono stati deprecati e disabilitati per impostazione predefinita in ui-router 1.0. Sto usando 1.0.0-alpha0. La funzionalità fornita da questi eventi può ora essere ottenuta utilizzando i ganci di transizione . Questo argomento è trattato nelle note di rilascio per la 1.0 alfa e può essere letto qui: https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer 2

Ampliando Eoins risposta, è possibile utilizzare i ganci su $ transizioni in un controllore componente come di seguito

 $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

Espandendosi con le altre risposte, è possibile attivare manualmente il legacy 0.2. * StateChange-events. Salvare il seguente modulo come 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; 

Poi mise require('./ui-router-polyfill-wrapper').default.name invece di require('angular-ui-router').name nel vostro modulo di applicazione angolare serie dipendenza.