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"

作为角度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

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

1 个答案: