5

Tôi đang ở giữa mã di chuyển từ Angular 1.3 đến Angular 1.5 components và ES6 controllers. Tôi đã cố gắng tìm một cái gì đó ở đây trên SO, nhưng không đủ hữu ích. Các đề xuất được yêu cầu về cách xem các sự kiện trên phạm vi khác với cách được đề cập bên dưới. Hoặc cách kích hoạt các sự kiện phạm vi từ chỉ thị. Ngoài ra xin vui lòng đề nghị cách chính xác để làm như vậy, nếu một thay thế tồn tại.Làm thế nào để nghe các sự kiện phạm vi trong thành phần Angular 1.5?

góc 1,3

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

góc 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 
}); 

Edit:

Quan tâm đến một sự thay thế với $ trên và không $ xem ở đây, gây $ onChange có thể thay thế $ đồng hồ khi bạn chỉ xem các biến. Tôi muốn nghe các sự kiện phạm vi, vì không phải 100% của mã 1.3 góc có thể được di chuyển sang 1.5, tôi vẫn có các chỉ thị kích hoạt các sự kiện trên phạm vi!

+0

Bản sao có thể có của [AngularJs 1.5 - Thành phần không hỗ trợ Người xem, công việc xung quanh là gì?] (Http://stackoverflow.com/questions/35534479/angularjs-1-5-component-does-not-support- người quan sát-những gì-là-the-công việc-xung quanh) – georgeawg

+0

@georgeawg Tôi quan tâm đến một thay thế cho $ trên và không $ xem ở đây, gây ra $ onChange có thể thay thế $ khi bạn chỉ xem các biến. Tôi muốn nghe các sự kiện phạm vi, vì không phải 100% của mã 1.3 góc có thể được di chuyển sang 1.5, tôi vẫn có các chỉ thị kích hoạt các sự kiện trên phạm vi! –

+0

Cách thay thế để kích hoạt các sự kiện trên phạm vi là sử dụng Ràng buộc biểu thức để truyền đạt các sự kiện từ thành phần này sang phụ huynh khác. Và sử dụng liên kết một chiều để truyền đạt các sự kiện theo cách khác từ thành phần cha mẹ sang con. – georgeawg

Trả lời

2

Các sự kiện phạm vi có thể được chuyển thành các quan sát RX trong một dịch vụ.

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

Sau đó, một thành phần có thể đăng ký vào các sự kiện:

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(); 
     }; 
     } 
}) 

góc 2 thay thế các xe buýt trường hợp phạm vi với RX quan sát. Chuyển đổi phạm vi sự kiện sang RX Observables cung cấp đường dẫn di chuyển dễ dàng từ AngularJS đến Angular 2.

DEMO on PLNKR.

Các vấn đề liên quan