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

【问题标题】：Subscription in Component not receiving values from shared service Observable组件中的订阅未从共享服务 Observable 接收值
【发布时间】：2018-06-03 12:32:44
【问题描述】：

我有这项服务：

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));
        }
    }

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

【问题讨论】：

您是否有多个服务提供者（例如，您是否将其包含在每个组件的providers 列表中）？应该只有一个全球提供商。

标签： angular angular-services angular-components

【解决方案1】：

我遇到了同样的问题，share 操作符可以工作。

连接后的 Observable 会导致源 Observable 向其 Observers 发射项目。

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：