Angular 2 - 共享服务订阅答案

【问题标题】：Angular 2 - Shared Service subscriptionAngular 2 - 共享服务订阅
【发布时间】：2016-08-23 06:26:15
【问题描述】：

根据本指南：Parent and children communicate via a service

我正在尝试使用共享服务作为 EventEmitter 的替代方案，因为 EventEmitter 仅在父组件和子组件之间进行通信。我的情况并非如此，但两个组件共享同一个服务（MasterdataService）。

我的订阅似乎无法拦截公告。浏览器控制台也没有错误，除了已经触发了announcement的日志信息。我真的很想知道我在这里缺少什么。

MasterdataService

import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class MasterdataService {

   private _updateAnnouncedSource = new Subject<string>();
   updateAnnounced$ = this._updateAnnouncedSource.asObservable();

   announceUpdate(value: string) {
      console.log('announcement to update list has been triggered');
      this._updateAnnouncedSource.next(value);
   }
}

MasterdataComponent（宣布更新）

@Component({
   providers: [MasterdataService]
})
export class MasterdataComponent {

   constructor(private masterdataService: MasterdataService) {}

   newMerchant(merchantIdInput: HTMLInputElement, merchantNameInput: HTMLInputElement) {      
      this.masterdataService.announceUpdate('newMerchant');
   }
}

MasterdataListComponent（订阅主题）

@Component({
   providers: [MasterdataService]
})
export class MasterdataListComponent {

   subscription:Subscription;

   constructor(private masterdataService:MasterdataService) {

      this.subscription = this.masterdataService.updateAnnounced$.subscribe(
         value => {
            console.log('update announcement received... updating list with value ', value);
            this.merchants = this.masterdataService.getAllMerchants();
       })
   }
}

【问题讨论】：

查看更多代码会更容易，以防您想知道为什么我之前没有回答但在这里回答:)
您是否检查过newMarchant 实际被调用并且在订阅之后也被调用？
刚刚添加了答案，让问题更明显地看到错误（组件装饰器）。

标签： typescript angular rxjs

【解决方案1】：

我的问题不是代码，而是我如何在组件中使用/声明服务。通过在装饰器的两个组件中定义该服务

@Component({
   providers: [MasterdataService]
})

angular 为每个组件实例化一个单独的服务。这样，两个组件之间就无法进行通信了。

由于我有一个根组件 (AppComponent)，我可以在该装饰器中声明服务，而 Angular 通过将服务作为两个组件类的构造函数中的参数来处理其余部分（DI 也称为依赖注入）。

【讨论】：