Angular 2 - 使用RXJS Observables

Question

我在Angular 1中有以下jsfiddle，它有兩個組件，boxA，boxB，它們監聽msgService中定義的一個名爲msgSubject的RXJS主體。

mainCtrl通過msgService廣播函數廣播消息。如果boxA和boxB訂閱了msgSubject（有一個選項可取消訂閱），則更新的消息將顯示在各個組件視圖中。

Angular 1 Observable 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); 
    } 
} 

然後S發送一個廣播消息：

BroadcastService.announceBoradcast("Hello World"); 

然後其他組分可以訂閱廣播：

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

以下是在Angular2上的組件之間的通信的一些信息 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service