在angualr文档 ------> 组件交互------> 父组件和子组件通过服务来通讯中遇到一段代码
private missionAnnounceSource = new Subject<string>();
private missionConfirmedSource = new Subject<string>();
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; }
}
我们可以在页面看到这样的效果
说明在这里我们已经将service拿到的值做了更改,然而我们再这里使用Subject的目的是让其作为Observables使用,
因此我们使用
asObservable()
做一点处理
/* mission.service.ts */
missionAnnounced$ = this.missionAnnounceSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
我们再看一下效果
这里出现了一个错误,说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; }
}