AngularJs-RXJS可观察的退订 [英] AngularJs - RXJS Observable unsubscribe

问题描述

我已经设置了一个可观察的RXJS.我有两个组件可以订阅服务工厂中的某个主题.如何取消订阅选定的组件，以便按下按钮停止播放主题广播?

I have setup an RXJS observable. I have two components which subscribe to a subject in service factory. How do I unsubscribe a selected component to the subject so that a button is pressed it stops listening to the subject broadcast?

请参阅我的jsfiddle 取消订阅应用程序

See my jsfiddle Unsubscribe App

我的代码:

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

推荐答案

请参阅更新的小提琴:此处

Please see updated fiddle: here

subscribe函数返回要使用的Disposable，您必须首先从工厂返回订阅(第60行):

the subscribe function returns a Disposable to work with and you must first return the subscription from your factory (line 60):

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

这将使您可以将预订存储在每个控制器中，以备将来使用. (第21和42行)

This will let you store your subscription in each controller to work with in the future. (line 21 & 42)

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

要取消订阅，可以在订阅上调用dispose方法:

You can then call the dispose method on the subscription when you want to unsubscribe:

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

n.b.

由于某种原因，我无法让您的演示与<md-button>一起使用，因此出于演示目的，我将其更改为<button>.

For some reason I couldn't get your demo to work with <md-button> so I changed this to <button> for the sake of the demo.

这篇关于AngularJs-RXJS可观察的退订的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！