7

Я использую Bable для ES6 и webpack. Я нахожусь на угловом 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, и я не могу найти никакой ссылки. Спасибо.

+1

попробуйте $ rootScope. $ On ('$ locationChangeStart', ...) –

+0

Почему бы вам не удалить все это в [mcve] и поделиться им с нами? – iH8

+0

@FranePoljak Dude Я использую UI-Router, поэтому, пожалуйста, прочитайте, прежде чем маркировать его отрицательным! –

ответ

13

У меня была аналогичная проблема, и в итоге я понял, что события stateChange* были устаревшими и отключены по умолчанию в ui-router 1.0. Я использую 1.0.0-alpha0. Функциональность, обеспечиваемая этими событиями, теперь может быть достигнута с использованием перехватчиков . Это описано в примечаниях к выпуску для 1,0 альфа и можно прочитать здесь: https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

+0

Вы могли работать с ним? Как и в том, работал ли он с вами, и вы можете указать мне какой-то код. Я использую «^ 1.0.0-alpha0» –

+0

Я все еще не понимаю, почему вы не можете использовать событие $ locationChangeStart службы определения местоположения? –

+2

@Eoin Спасибо, имел ту же проблему, и [документация] (https://github.com/angular-ui/ui-router/wiki#state-change-events) ничего не упоминала. Теперь я добавил строку, ссылающуюся на эту документацию, чтобы сэкономить людям некоторое время – mrzli

8

Расширяя Eoins ответа, вы можете использовать крючки на $ переходы в компоненте контроллера, как показано ниже

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

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

0

Расширяясь по другим ответам, вы можете вручную активировать устаревшие 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 в массиве зависимостей углового модуля приложения.

Смежные вопросы