asObservable()使用

在angualr文档 ------> 组件交互------> 父组件和子组件通过服务来通讯中遇到一段代码

private missionAnnounceSource = new Subject();
private missionConfirmedSource = new Subject();
  
missionAnnounced$ = this.missionAnnounceSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();

这里使用了Rxjs中的Subject, 查了一下文档发现Subject是一个特殊的Observable,它允许将值多播给多个观察者
而且 每个 Subject 都是 Observable 每个 Subject 都是观察者 也就是说Subject可以被订阅,同时也具有观察者的三种方法:next,error,component
所以我们将代码改一下:

/* mission.service.ts */
missionAnnounced$ = this.missionAnnounceSource;
missionConfirmed$ = this.missionConfirmedSource;

/* missioncontrol.compolent.ts */
announce() {
  let mission = this.missions[this.nextMission++];
    
  this.missionService.missionConfirmed$.next('hello'); // 新增代码
    
  this.missionService.announceMission(mission);
  this.history.push(`Mission "${mission}" announced`);
  if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
}

我们可以在页面看到这样的效果

image.png

说明在这里我们已经将service拿到的值做了更改,然而我们再这里使用Subject的目的是让其作为Observables使用,
因此我们使用asObservable() 做一点处理

/* mission.service.ts */
missionAnnounced$ = this.missionAnnounceSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();

我们再看一下效果

image.png

这里出现了一个错误,说next()不存在,这说明了Subject不在作为观察者使用了
再将代码做一点更改

/* missioncontrol.compolent.ts */
announce() {
  let mission = this.missions[this.nextMission++];
    
  //this.missionService.missionConfirmed$.next('hello'); // 删除这行代码,程序将正常运行
    
  this.missionService.announceMission(mission);
  this.history.push(`Mission "${mission}" announced`);
  if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
}