角2 - RXJS Observablesを使用する

Question

私はmsgServiceで定義されたmsgSubjectと呼ばれるRXJSサブジェクトをlistenするboxA、boxBという2つのコンポーネントを持つAngular 1に以下のjsfiddleを持っています。

mainCtrlはmsgServiceブロードキャスト機能によってメッセージをブロードキャストします。 boxAとboxBがmsgSubjectに登録されている場合（購読解除するオプションがあります）、更新されたメッセージがそれぞれのコンポーネントビューに表示されます。

Angular 1 Observable Js Fddile

私の質問は、私は角度2でこれを複製しない方法ですか？私はグーグルで、ほとんどのチュートリアルは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

次の2つのコンポーネント間の通信にサービスを使用することができます。一方の成分に続いて

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"); 

：sがブロードキャストメッセージを送信ここ

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

はAngular2内のコンポーネント間の通信に関するいくつかの詳細情報である。 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service