需要一种方法来订阅 Angular 服务持有的可观察对象并将其显示在视图中

Question

我正在编写一个 angular + nodejs 应用程序，其中服务器侦听 twitter 流，前端 angular 应用程序使用 socket.io 从服务器获取数据。到目前为止一切正常，但我无法找到一种方法来订阅我的 angular 服务，该服务使用 socket.io 获取数据。我如何订阅我的服务所拥有的数据以及如何将它绑定到我的视图，以便显示数据。

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

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>

Answer 1

收集数组中的推文并使用*ngFor="#tweet of tweets"绑定到数组：

tweets.tweets$.subscribe(tweets => this.items = this.items.concat(tweets));

哦恩 | async

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

Answer 2

您可以这样实现此功能：

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

这样，当收到推文时，推文列表将在您的组件中更新。这样您仍然可以使用异步运算符。

您也可以在您的组件中而不是在服务中实现此类处理。

@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 中使用异步管道。

需要一种方法来订阅 Angular 服务持有的可观察对象并将其显示在视图中

Need a way to subscribe to an observable that Angular service holds and also display it in view

observable

rxjs

angular