在不使用主题的情况下，通过服务上的Angular 2通信

Question

我想知道我是否可以在没有主题的情况下解决以下方案。我有两个组成部分：第一个组件创建了一个英雄，而另一个组件则显示一个英雄。这些组件通过服务进行通信。目前，我有以下解决方案：

英雄创建

@Component({
  selector: 'hero-creation',
  ....
})
export class HeroCreation{
  constructor(private heroSercice: HeroService){
  }
  onClick(){
     this.heroSercice.addHero();
  }
}

英雄服务

@Injectable()
export class HeroService {
public hero$: Subject<string> = new Subject<string>();
  constructor() {
  }
  public addHero(hero: string): void {
    this.hero$.next(hero);
  }
}

英雄显示

@Component({
selector: 'hero-display',
....
})
export class HeroDisplay{
  constructor(private heroSercice: HeroService){
    //Use async pipe in template to display the hero
    this.heros$ = this.heroSercice.hero$
  }
}

目标是仅使用主题的普通可观察物来实现相同的功能。

Answer 1

这是对主题的用例。

主题类既可以观察和观察者，既是观察者，又是可观察的。

。

创建hero$可观察到后，应以某种方式添加新值。并且应该通过观察者添加它们。没有主题，必须手动暴露观察者才能达到它：

protected _heroObserver: Observer<string>;
public hero$: Observable<string> = Observable.create<string>(observer => {
    this._heroObserver = observer;
});
...
public addHero(hero: string): void {
    this._heroObserver.next(hero);
}

这正是主题应该做的。由于addHero充当设置器，因此随着公共财产破裂的封装而公开一个主题。为了保留封装，可以仅暴露hero$可观察到：

protected _heroSubject: Subject<string> = new Subject<string>();
public hero$: Observable<string> = this._heroSubject.asObservable();
...
public addHero(hero: string): void {
    this._heroSubject.next(hero);
}