组件中的订阅未从共享服务Observable接收值

Question

我有这项服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MissionService {
    // Observable string sources
    private missionAnnouncedSource = new Subject<string>();
    private missionConfirmedSource = new Subject<string>();
    // Observable string streams
    missionAnnounced$ = this.missionAnnouncedSource.asObservable();
    missionConfirmed$ = this.missionConfirmedSource.asObservable();
    // Service message commands
    announceMission(mission: string) {
        this.missionAnnouncedSource.next(mission);
    }
    confirmMission(astronaut: string) {
        this.missionConfirmedSource.next(astronaut);
    }
}

这个组件：

export class ComponentOne {
    constructor(private service: MissionService) { }

    onClick() {
        console.log('entered in the onclick method');
        this.service.announceMission('mission started');
        this.service.missionAnnounced$.subscribe(response => console.log('from component 1: ' + response), error => console.log('error: ', error))
    }
}

其他组成部分：

   export class ComponentTwo {
        constructor(private service: MissionService) {
        console.log('entered in constructor ComponentTwo')
            this.service.missionAnnounced$.subscribe(response => console.log('from component 2: ' + response),
                error => console.log('error: ', error));
        }
    }

我不知道为什么console.log里面的subscribe()与ComponentTwo上的响应值永远不会被打印出来，甚至消息from component 2:的部分内容也从未出现过。但是entered in constructor ComponentTwo消息总是显示出来..没有任何错误消息出现

Answer 1

使用Subject时，您只会收到调用subscribe后发出的事件（值）的通知。在这种情况下，我怀疑该服务在创建ComponentTwo中的订阅之前发出其值。

如果您希望主题“记住”其最后一个值，以便新订阅者将看到最后一个值，请参阅BehaviorSubject。

另一种可能性是您独立地为两个组件提供服务，在这种情况下，您实际上将有两个不同的服务实例。这意味着ComponentOne将不会看到与ComponentTwo相关联的服务上发出的事件，反之亦然。

为了使两个组件共享提供者的同一个实例，它通常应该在包含它们的@NgModule中提供（并且特别是不在两个地方列出，每个组件一个）。例如：

@NgModule({
  declarations: [ComponentOne, ComponentTwo],
  providers: [MissionService],  // Will be shared by both components
  // ...
})
export class AppModule {
}

Answer 2

我有同样的问题，share运算符工作。

一个Observable，在连接时导致源Observable向其Observers发出项目。

import 'rxjs/add/operator/share';
...
missionAnnounced$ = this.missionAnnouncedSource.asObservable().share();
missionConfirmed$ = this.missionConfirmedSource.asObservable().share();