7

コードを Angular 1.3 から Angular 1.5 コンポーネントと ES6 コントローラーに移行中です。SOで何かを見つけようとしましたが、十分に役に立ちませんでした。以下の方法以外の範囲でイベントを視聴する方法について提案が必要です。または、ディレクティブからスコープ イベントをトリガーする方法。また、代替案が存在する場合は、正しい方法を提案してください。

角度 1.3

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

角度 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
});

編集：

ここで $watch ではなく $on の代わりに興味があるのは、変数を監視しているだけで $onChange が $watch を置き換えることができるからです。angular 1.3コードの100％を1.5に移行できるわけではないため、スコープイベントをリッスンしたいのですが、スコープでイベントをトリガーするディレクティブがまだあります!

4

1 に答える 1

3

スコープ イベントは、サービス内の 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 への簡単な移行パスが提供されます。

PLNKRのデモ。

于 2016-08-28T20:28:15.137 に答える