AngularJs - RXJS Obserwowalny wypisanie

Question

Mam skonfigurowany RXJS obserwowalny. Mam dwa komponenty, które subskrybują temat w fabryce usług. Jak zrezygnować z subskrypcji wybranego komponentu na obiekcie, aby przycisk został naciśnięty, przestał słuchać audycji tematycznej?

zobaczyć moje jsfiddle Unsubscribe App

Mój kod:

<div ng-app="myApp" ng-controller="mainCtrl"> 

    <script type="text/ng-template" id="/boxa"> 
    BoxA - Message Listener: </br> 
    <strong>{{boxA.msg}}</strong></br> 
    <md-button ng-click='boxA.unsubcribe()' class='md-warn'>Unsubscribe A</md-button> 
    </script> 
    <script type="text/ng-template" id="/boxb"> 
    BoxB - Message Listener: </br> 
    <strong>{{boxB.msg}}</strong></br> 
    <md-button ng-click='boxB.unsubcribe()' class='md-warn'>Unsubscribe B</md-button> 
</script> 

    <md-content class='md-padding'> 
    <h3> 
     {{name}} 
    </h3> 
    <label>Enter Text To Broadcast</label> 
    <input ng-model='msg'/></br> 
    <md-button class='md-primary' ng-click='broadcastFn()'>Broadcast</md-button></br> 
    <h4> 
    Components 
    </h4> 
    <box-a></box-a></br> 
    <box-b></box-b> 
    </md-content> 

</div><!--end app--> 


var app = angular.module('myApp', ['ngMaterial']); 
app.controller('mainCtrl', function($scope,msgService) { 

    $scope.name = "Observer App Example"; 
    $scope.msg = 'Message'; 
    $scope.broadcastFn = function(){ 
     msgService.broadcast($scope.msg); 
    } 
}); 

app.component("boxA", { 
     bindings: {}, 
     controller: function(msgService) { 
     var boxA = this; 
     boxA.msgService = msgService;    
     boxA.msg = ''; 
     boxA.msgService.subscribe(function(obj) { 
      console.log('Listerner A'); 
      boxA.msg = obj; 
       }); 
     boxA.unsubscribe=function(){ 

     }; 

     }, 
     controllerAs: 'boxA', 
     templateUrl: "/boxa" 
}) 
app.component("boxB", { 
     bindings: {}, 
     controller: function(msgService) { 
     var boxB = this; 
     boxB.msgService = msgService;    
     boxB.msg = ''; 
     boxB.msgService.subscribe(function(obj) { 
      console.log('Listerner B'); 
      boxB.msg = obj; 
       }); 

     boxB.unsubscribe=function(){ 

     }; 
     }, 
     controllerAs: 'boxB', 
     templateUrl: "/boxb" 
}) 

app.factory('msgService', ['$http', function($http){ 
    var msgSubject = new Rx.ReplaySubject(); 
    return{ 
     subscribe:function(subscription){ 
      msgSubject.subscribe(subscription); 
     }, 
     broadcast:function(msg){ 
     console.log('success'); 
      msgSubject.onNext(msg); 
     } 
    } 
}]) 

Answer 1

proszę zobaczyć zaktualizowaną skrzypce: here

funkcja subscribe zwraca Disposable do pracy i należy najpierw zwrócić subskrypcji u fabryka (linia 60):

subscribe: function(subscription){ 
    return msgSubject.subscribe(subscription); 
} 

Umożliwi to przechowywanie subskrypcji w każdym kontrolerze, z którym będzie można pracować w przyszłości. (Linia 21 & 42)

var boxASubscription = boxA.msgService.subscribe(function(obj) { 
    console.log('Listerner A'); 
    boxA.msg = obj; 
}); 

Następnie można wywołać metodę dispose na subskrypcji, gdy chcesz zrezygnować:

boxA.unsubscribe = function(){ 
    console.log('Unsubscribe A'); 
    boxASubscription.dispose(); 
}; 

nb

Z jakiegoś powodu nie mogłem dostać twojego demo do pracy z <md-button>, więc zmieniłem to na <button> ze względu na wersję demonstracyjną.

Answer 2

Jak na mój komentarz powyżej nowych RxJs 5 Beta zmieniło od subscription.dispose() do subscription.unsubscribe() Proszę zapoznać się tutaj https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#subscription-dispose-is-now-unsubscribe