在angualr文檔 ------> 組件交互------> 父組件和子組件通過服務(wù)來通訊中遇到一段代碼
private missionAnnounceSource = new Subject<string>();
private missionConfirmedSource = new Subject<string>();
missionAnnounced$ = this.missionAnnounceSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
這里使用了Rxjs中的Subject, 查了一下文檔發(fā)現(xiàn)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
說明在這里我們已經(jīng)將service拿到的值做了更改,然而我們再這里使用Subject的目的是讓其作為Observables使用,
因此我們使用
asObservable() 做一點處理
/* mission.service.ts */
missionAnnounced$ = this.missionAnnounceSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
我們再看一下效果
image.png
這里出現(xiàn)了一個錯誤,說next()不存在,這說明了Subject不在作為觀察者使用了
再將代碼做一點更改
/* missioncontrol.compolent.ts */
announce() {
let mission = this.missions[this.nextMission++];
//this.missionService.missionConfirmed$.next('hello'); // 刪除這行代碼,程序?qū)⒄＿\行
this.missionService.announceMission(mission);
this.history.push(`Mission "${mission}" announced`);
if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
}
