我正在将代码从Angular 1.3迁移到Angular 1.5组件和ES6控制器.我试图在这里找到一些东西,但没有足够的帮助.关于如何在范围外观看事件所需的建议,而不是下面提到的方式.或者如何从指令触发范围事件.如果存在替代方案,请建议正确的方法.
Angular 1.3
angular
.module('test')
.directive('test',function() {
return {
link: function(scope) {
scope.$on('$stateChangeStart',function(event,toState,toParams) {
//logic goes here..
});
}
}
});
Angular 1.5 / ES6
class TestController {
/* @ngInject */
constructor($scope) {
this._$scope = $scope;
}
$onInit() {
this._$scope.$on('$stateChangeStart',(event,toParams) => {
//logic goes here
});
}
}
angular
.module('test')
.component('test',{
controller: TestController
});
编辑：
有兴趣选择$on而不是$watch,因为当你只是观察变量时,$onChange会取代$watch.我想听范围事件,因为不是100％的angular 1.3代码可以迁移到1.5,我仍然有指令触发范围上的事件！
解决方法
范围事件可以转换为服务中的RX可观察对象.
app.factory("rxLocationChangeStart",function($rootScope,rx) {
var rxLocationChangeStart = new rx.Subject();
$rootScope.$on("$locationChangeStart",function() {
rxLocationChangeStart.onNext(arguments);
});
return rxLocationChangeStart;
})
然后组件可以订阅这些事件：
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();
};
}
})
Angular 2用RX Observables替换范围事件总线.将范围事件转换为RX Observables提供了从AngularJS到Angular 2的简单迁移路径.
