$ stateChangeStart không bị sa thải khi trạng thái Thay đổi trong giao diện người dùng-Router ES6?

Question

Tôi đang sử dụng Bable cho ES6 và webpack. Tôi đang ở trên 1.x.x góc cạnh và xây dựng một ứng dụng. Cho đến bây giờ tôi đã không gặp bất kỳ vấn đề gì. Tôi muốn có một chức năng mà tôi có thể theo dõi tất cả các thay đổi lộ trình. Tôi đang sử dụng UI-Router. Vấn đề là $stateChangeStart không được kích hoạt. Mã được đề cập dưới đây.

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

Xin vui lòng cho tôi biết những gì tôi đang làm sai ma vì nhà nước đang bị thay đổi nhưng sự kiện $stateChangeStart không bao giờ được kích hoạt. Phương pháp run là nơi tôi đang kết nối với người nghe $stateChangeStart.

Tôi đoán điều gì đó liên quan đến ES6 và tôi không thể tìm thấy bất kỳ tham chiếu nào. Cảm ơn.

Answer 1

Tôi đã gặp sự cố tương tự và cuối cùng nhận ra rằng các sự kiện stateChange* đã không được chấp nhận và bị tắt theo mặc định trong ui-router 1.0. Tôi đang sử dụng 1.0.0-alpha0. Chức năng do các sự kiện này cung cấp hiện có thể đạt được bằng cách sử dụng các móc chuyển đổi . Đây được bao phủ trong ghi chú phát hành cho 1.0 alpha và có thể được đọc ở đây: https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer 2

Mở rộng trên Eoins câu trả lời, bạn có thể sử dụng các móc trên $ chuyển vào một bộ điều khiển thành phần như sau

 $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

Mở rộng trên các câu trả lời khác, bạn có thể kích hoạt thủ công 0,2. * StateChange-events. Lưu module sau như 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; 

Sau đó đặt require('./ui-router-polyfill-wrapper').default.name thay vì require('angular-ui-router').name trong mảng phụ thuộc mô-đun ứng dụng góc của bạn.