サービスからの角度2 - 更新コンポーネントのMVC？

Question

AIM：私はang 2からhttpリクエストをjavaサーバーに送信します。それが実行されている間、サーバは進捗ステータスを持つメッセージを生成しますので、私はプログレスバーを更新できます。 AppComponent、AppServiceとWebsocketService：

私は3つのエンティティを持っています。 以下は、 WebsocketServiceの簡略化した例です。メッセージトピックを購読し、各メッセージの受信時にいくつかのアクションを実行できます。

export class WebsocketService { 

    private client: Client; 

    constructor() { 
     var service = this; 
     service.client = Stomp.client('ws://localhost:8080/stomp/websocket'); 

     service.client.connect("user", "pass", function() { 
      service.client.subscribe("/progress", function (message) { 
       // some actions here 
      }) 
     }); 
    } 
} 

だから、私の質問は：AppServiceあるいはWebsocketServiceから、テンプレートにバインドされAppComponentのプロパティ（フィールド）の値を、更新する方法？セッターを使用しますか？それはMVCの条件から大丈夫ですか？

Answer 1

これを行う方法は複数ありますが、「件名」ストリームを使用します。ここで

は一例です：

import {Injectable} from '@angular/core'; 
import {Http, Headers, RequestOptions, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import {Subject} from 'rxjs/Subject'; 
import {NextObserver} from 'rxjs/Observer'; 

export class WebsocketService { 
    public ProcessingMessages$: Observable<string>; 

    private client: Client; 
    private processingMessages: Subject<string>; 


    constructor() { 
     this.processingMessages = new Subject<string>(); 
     this.ProcessingMessages$ = this.processingMessages.asObservable(); 

     var service = this; 
     service.client = Stomp.client('ws://localhost:8080/stomp/websocket'); 

     service.client.connect("user", "pass", function() { 
      service.client.subscribe("/progress", function (message) { 
       this.processingMessages.next(message); 
      }) 
     }); 
    } 
} 

// Sample Component 
@Component({ 
    selector: 'my-component', 
    template: 'WebsocketService Message: {{Message}}', 
}) 
export class Sample Component implements OnInit { 
    public Message: string; 

    constructor(
     private service: WebsocketService 
    ) { 
    } 

    ngOnInit() { 
     this.service.ProcessingMessages$.subscribe((message: string) => { 
      this.Message = message; 
     }); 
    } 
}