我正在编写一个angular nodejs应用程序,其中服务器使用socket.io从服务器侦听twitter流和前端角度应用程序 . 一切都工作到这一点,但我无法找到订阅我的角度服务的方法,使用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>
2 回答
您可以这样实现此功能:
这样,收到twit的时间,twits列表将在您的组件中更新 . 这样您仍然可以使用异步运算符 .
您也可以在组件中实现此类处理,而不是在服务中实现 .
和组件:
在这种情况下,this.tweets对应一个简单的数组(不是可观察的),并且您不需要在ngFor中使用异步管道 .
收集数组中的推文并使用
*ngFor="#tweet of tweets"
绑定到数组:ohne
| async