我正在将代码从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, toState, toParams) => {
//logic goes here
});
}
}
angular
.module('test')
.component('test', {
controller: TestController
});
编辑:
对于$ on而非$ watch的替代品感兴趣,因为当你只是观察变量时,$ onChange可以取代$ watch。我想听范围事件,因为不是100%的angular 1.3代码可以迁移到1.5,我仍然有指令触发范围上的事件!
答案 0 :(得分:3)
范围事件可以转换为服务中的RX observable。
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的简单迁移路径。