如何在 angular 2 中实现 rxjs 订阅？

Question

我有一个带有以下代码的服务：

import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import {Article} from './article';

@Injectable()
export class ArticleService {
public articleSelected$: Observable<Article>;
private _observer: Observer<Article>;

constructor() {
this.articleSelected$ = new Observable(observer =>
    this._observer = observer).share();
}
selectArticle(article:Article){
this._observer.next(article);
}}

在我的组件中：

export class seeArticle{

subscription: any;

constructor(private _articleService: ArticleService) {
}
ngOnInit() {
    this.subscription = this._articleService.articleSelected$
        .subscribe(article => this.onArticleSelected(article));
}
onArticleSelected(article){
    console.log("an article was selected",article);
}
}

当我在另一个组件中选择一篇文章（通过点击它）时，selectArticle 服务函数被执行，没有问题。 但是， this._observer.next(article); 似乎触发了以下错误：

"TypeError: Cannot read property 'next' of undefined"

作为 angular 2 和 Rxjs 的新手，我无法弄清楚

Answer 1

与您的代码的问题是， this._observer时尚不可用selectArticle方法被调用，因为

observer => this._observer = observer

部分是异步的。

因此，不要手动创建 Observable，而是使用为您正确包装 Observable 的EventEmitter ：

@Injectable()
export class ArticleService {
  public articleSelected$: EventEmitter<Article>;

  constructor() {
    this.articleSelected$ = new EventEmitter();
  }

  selectArticle(article:Article){
    this.articleSelected$.next(article);
  }

}

演示： http : //plnkr.co/edit/sz5Dzm1SoisTJlvj8RcQ?p=info