需要一种方法来订阅Angular服务持有的可观察对象并在视图中显示它 [英] Need a way to subscribe to an observable that Angular service holds and also display it in view

问题描述

我正在编写一个angular + nodejs应用程序，服务器在其中侦听Twitter流，而前端套接字应用程序则使用socket.io从服务器获取数据.到现在为止一切正常，但是我无法找到一种方法来订阅我的使用socket.io获取数据的角度服务.如何订阅服务中的数据，以及如何将其绑定到视图，以便显示数据.

I am writing an angular + nodejs application where server listens to twitter stream and front-end angular application using socket.io gets data from server. Everything works till this point, but I am unable to find a way to subscribe to my angular service which using socket.io gets the data. How can I subscribe to the data that my service has and also how can I bind it to my view, so that the data shows up.

这是我在Angular中从服务器获取数据的服务代码:

Here is my service code in Angular that gets data from server:

import {Injectable} from 'angular2/core';
import {Observer} from 'rxjs/Observer';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class twitterService {
    socket = null;
    tweets$: Observable<string[]>;
    private _tweetObserver : Observer<string>;
    constructor(){
        this.tweets$ = new Observable(observer => this._tweetObserver = observer);
    }
    getTweets() {
        var tweetText: string;
        this.socket = io('http://localhost:8383');
        this.socket.on('twit', function(data){
            tweetText = data; 
        });
        this._tweetObserver.next(tweetText);
    }
}

这是我的组件:

import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {twitterService} from '../Services/Twitter/twitterService';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/map';
@Component({
    selector: 'social',
    viewProviders: [HTTP_PROVIDERS],
    providers: [twitterService],
    templateUrl: './components/app/social/social.html'
})
export class socialComponent {
    public tweetsObserver: Observer<string>;
    public tweets$:Observable<string>;
    public tweetsData:string[] = ["Red", "Yellow"];
    items: Array<string>;
    constructor(http: Http, tweets:twitterService) {
        tweets.tweets$.subscribe(tweets => this.items = tweets);
        tweets.getTweets();
    }
}

这是我的查看代码:

<li *ngFor="#item of items | async">{{item}}</li>

推荐答案

您可以通过以下方式实现此功能:

You could implement this feature this way:

@Injectable()
export class twitterService {
  socket = null;
  tweets$: Observable<string[]>;
  private _tweetObserver : Observer<string>;
  tweets: string[];

  constructor(){
    this.tweets$ = new Observable(observer => this._tweetObserver = observer);
  }

  getTweets() {
    var tweetText: string;
    this.socket = io('http://localhost:8383');
    this.socket.on('twit', (data) =>{
        this.tweets.push(data);
        this._tweetObserver.next(this.tweets); 
    });
  }
}

这样，一旦收到twit，twit列表将在您的组件中更新.这样，您仍然可以使用异步运算符.

This way time a twit is received, the list of twits will be updated in your component. This way you can still use the async operator.

您还可以在组件中而不是在服务中实现此类处理.

You could also implement such processing in your component and not in the service.

@Injectable()
export class twitterService {
  socket = null;
  tweet$: Observable<string>;
  private _tweetObserver : Observer<string>;

  constructor(){
    this.tweet$ = new Observable(observer => this._tweetObserver = observer);
  }

  getTweets() {
    var tweetText: string;
    this.socket = io('http://localhost:8383');
    this.socket.on('twit', (data) =>{
        this._tweetObserver.next(data); 
    });
  }
}

和组件:

service.$tweet.subscribe((newTwit) => {
  this.tweets.push(newTwit);
});

在这种情况下，this.tweets对应一个简单的数组(不是可观察的数组)，并且您不需要在ngFor中使用异步管道.

In this case, this.tweets corresponds a simple array (not an observable) and you don't need to use the async pipe in your ngFor.

这篇关于需要一种方法来订阅Angular服务持有的可观察对象并在视图中显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！