AngularJs - RXJS Observable unsubscribe

Question

私は、観測可能なRXJSをセットアップしました。私は、サービス工場の科目を購読する2つのコンポーネントを持っています。選択したコンポーネントをサブジェクトに登録解除して、ボタンを押すとサブジェクトのブロードキャストの受信を停止するにはどうすればよいですか？

Unsubscribe App

に私のコードを私のjsfiddleを参照してください：

<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

更新フィドルを参照してください：here

subscribe機能はで動作するようにDisposableを返し、あなたが最初にあなたからのサブスクリプションを返す必要があります工場（行60）：

これにより、今後使用する各コントローラにサブスクリプションを保存できます。

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

n.b.：あなたが退会したいときは、サブスクリプションにdisposeメソッドを呼び出すことができます（21行& 42）

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

何らかの理由で<md-button>でデモを使用できないため、デモのために<button>に変更しました。今subscription.unsubscribe()へsubscription.dispose()から変更し、新たなRxJs 5ベータ上記の私のコメントを1として

Answer 2

はhttps://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#subscription-dispose-is-now-unsubscribe