Angular 2中的MVC - 從服務中更新組件？

AIM：我發送一個來自angular 2 ui的http請求到java服務器。在執行時，服務器會生成具有進度狀態的消息，以便我可以更新ui上的進度條。Angular 2中的MVC - 從服務中更新組件？

我有3個實體：AppComponent，AppService服務和WebsocketService。這是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 
      }) 
     }); 
    } 
}

所以，我的問題是：如何更新AppComponent的財產（場）的值，這是綁定到模板，從AppService服務甚至WebsocketService？使用setter？從MVC的條款來看它是否正確？

來源

2016-08-11 sinedsem

有多種方法可以做到這一點，但我會使用「主題」流。

下面是一個例子：

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

來源

2016-08-11 23:01:38

是的，我想過觀察到的，但我不知道如何發佈的可觀。感謝這個好榜樣！我還可以在可觀察的結尾使用'$'，並從大寫字母中寫出它，這只是您的偏好，或者它是一種命名約定？ – sinedsem

這是一個命名約定，所以我們知道它是一個可觀察的主題流。我從Angular 2站點獲得了這一點。你不需要有兩個單獨的變量，我更喜歡這種方式，但你可以簡單地在你的服務中返回一個返回this.processingMessage.asObservable（）的函數，然後訂閱它。 –

沒有找到使用此命名約定的任何示例。你能幫我提供一些鏈接嗎？ – sinedsem

Angular 2中的MVC - 從服務中更新組件？

回答

相關問題