javascript – 如何在Angular 1.5组件中监听范围事件？

我正在将代码从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的简单迁移路径.

DEMO on PLNKR.

原文地址：https://www.jb51.cc/js/157434.html