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 - 从服务中更新组件？

回答

相关问题