Angular 1.5 bileşeninde kapsam olayları nasıl dinlenir?

Question

Angular 1.3 - Angular 1.5 bileşenleri ve ES6 denetleyicilerinden geçiş kodunun ortasındayım. Burada bir şey bulmaya çalıştım ama yeterince yararlı değil. Aşağıda belirtilen yoldan başka olaylarla ilgili olayların nasıl izlenmesi gerektiğine dair önerilerde bulunulmuştur. Veya kapsam olaylarını direktiften nasıl tetikleyebiliriz. Ayrıca, bir alternatif varsa, lütfen doğru yolu öneriniz.

Eğik 1,3

angular 
.module('test') 
.directive('test', function() { 
    return { 
     link: function(scope) { 
      scope.$on('$stateChangeStart', function(event, toState, toParams) { 
       //logic goes here.. 
      }); 
     } 
    } 
}); 

Açısal 1.5/ES6

class TestController { 
    /* @ngInject */ 
    constructor($scope) { 
     this._$scope = $scope; 
    } 

    $onInit() { 
     this._$scope.$on('$stateChangeStart', (event, toState, toParams) => { 
      //logic goes here 
     }); 
    } 
} 

angular 
.module('test') 
.component('test', { 
    controller: TestController 
}); 

Düzenleme:

üzerine $ ve $ burada izlemek için alternatif ilgileniyor

$, neden onChange $ saatini yerini alabilir sadece değişkenleri izlerken. Kapsam olaylarını dinlemek istiyorum, açısal 1.3 kodun% 100'ü 1.5'e taşınamadığından, hala kapsamdaki olayları tetikleyen direktiflerim var!

Answer 1

Kapsam olayları, bir hizmette RX gözlenebilirlerine dönüştürülebilir.

app.factory("rxLocationChangeStart", function($rootScope, rx) { 
    var rxLocationChangeStart = new rx.Subject(); 
    $rootScope.$on("$locationChangeStart", function() { 
     rxLocationChangeStart.onNext(arguments); 
    }); 
    return rxLocationChangeStart; 
}) 

Sonra bir bileşenidir bu olayların abone olabilir:

app.component("locationMonitor", { 
     scope: {}, 
     template: ['<p>oldPath={{$ctrl.oldPath}}</p>', 
        '<p>newPath={{$ctrl.newPath}}</p>'].join(''), 
     controller: function (rxLocationChangeStart) { 
     var $ctrl = this; 
     var subscr = rxLocationChangeStart.subscribe(function(data) { 
      console.log("locationChangeStart ", data); 
      $ctrl.newPath = data[1]; 
      $ctrl.oldPath = data[2]; 
     }); 
     this.$onDestroy = function() { 
      subscr.dispose(); 
     }; 
     } 
}) 

Eğik 2 RX Gözlenebilirler ile kapsam olay otobüsü değiştirir. Kapsam olaylarını RX Observables'a dönüştürmek, AngularJS'den Angular 2'ye kolay bir geçiş yolu sağlar.

DEMO on PLNKR.