角2 - 使用RXJS观测量(Angular 2 - Using RXJS Observables

我在角1以下的jsfiddle有两个部件，BOXA，盒B侦听称为msgSubject一个RXJS受试者中msgService定义。

所述mainCtrl广播通过msgService广播功能的消息。 如果BOXA和盒B订阅了msgSubject（有退订一个选项）的更新的消息将在每个各自的组件视图显示。

角1可观察的js Fddile

我的问题是我怎么在角2复制这个？ 我GOOGLE和大多数的教程涉及到HTTP和异步搜索。 我很感激，如果有人至少可以告诉我的语法来设置主题，广播和订阅。 任何帮助，我很感激。 提前致谢。

角1码

HTML

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

  .table-cell{
    border-right:1px solid black;
  }
  </style>
  <script type="text/ng-template" id="/boxa">
  BoxA - Message Listener: </br>
  <strong>{{boxA.msg}}</strong></br>
  <button ng-click="boxA.unsubscribe()">Unsubscribe A</button>
  </script>
  <script type="text/ng-template" id="/boxb">
    BoxB - Message Listener: </br>
  <strong>{{boxB.msg}}</strong></br>
  <button ng-click="boxB.unsubscribe()">Unsubscribe B</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-->

使用Javascript

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 = '';

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

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

      },
      controllerAs: 'boxA',
      templateUrl: "/boxa"
})
app.component("boxB",  {
      bindings: {},
      controller: function(msgService) {
        var boxB = this;
        boxB.msgService = msgService;

        boxB.msg = '';
        var boxBSubscription = boxB.msgService.subscribe(function(obj) { 
            console.log('Listerner B');
          boxB.msg = obj;
                });

        boxB.unsubscribe=function(){
            console.log('Unsubscribe B');
          boxBSubscription.dispose();
        };
      },
      controllerAs: 'boxB',
      templateUrl: "/boxb"
})

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

Answer 1:

你可以使用一个服务的两个组件之间的通信：

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class BroadcastService {

  private broadcastSource = new Subject<string>();

  // Observable string streams
  // Return as observale to encapsulate the subject
  broadcastAnnounce$ = this.broadcastSource.asObservable();

  // Service message commands
  announceBoradcast(message: string) {
    this.broadcastSource.next(message);
  }
}

然后，在一个组件发送广播消息：

BroadcastService.announceBoradcast("Hello World");

然后其他的组件可以订阅广播：

BroadcastService.broadcastAnnounce$.subscribe((message) => {
    console.log(message);
})

这里是通信组件之间Angular2一些更多的信息： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

文章来源: Angular 2 - Using RXJS Observables