首页 文章

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

提问于
浏览 次
0

我正在编写一个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>
angular rxjs observable

2 回答

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

    这样，收到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中使用异步管道 .

    回复于
  • 1

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

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

    ohne | async

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

相关问题