Question

我正在编写一个angular + nodejs应用程序，其中服务器使用socket.io从服务器侦听twitter流和前端角度应用程序。一切都工作到这一点，但我无法找到订阅我的角度服务的方法，使用socket.io获取数据。我如何订阅我的服务所拥有的数据，以及如何将其绑定到我的视图，以便显示数据。

以下是Angular中的服务代码，用于从服务器获取数据：

extends Animal

这是我的组件：

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

Answer 1

您可以通过这种方式实现此功能：

@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的时间，twits列表将在您的组件中更新。这样你仍然可以使用异步操作符。

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

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

Answer 2

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

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

ohne | async

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

需要一种方法来订阅Angular服务所持有的observable，并在视图中显示它

2 个答案: