角2 - 共享服务订阅

问题描述：

根据本指南：Parent and children communicate via a service 角2 - 共享服务订阅

我特林使用共享服务作为替代EventEmitter，由于仅EventEmitter父和子组件之间进行通信。在我的情况中情况并非如此，但两个组件都共享相同的服务（MasterdataService）。

看来我的订阅无法拦截该通知。浏览器控制台中也不存在任何错误，但已宣告的日志信息已被触发。我真的很想知道我在这里错过了什么。

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'实际上是否被调用，并且在**订阅后也被称为**？ –

只是添加了答案，并使问题更明显地看到错误（组件装饰器）。 –

答

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

@Component({ 
    providers: [MasterdataService] 
})

角度实例化每个组件的单独服务。这样，两个组件之间就不能执行通信。由于我有一个根组件（AppComponent），我可以在该装饰器中声明服务，并通过将服务作为两个组件类的构造函数中的参数来处理其余的部分（DI a.k.a依赖注入）。

角2 - 共享服务订阅

相关推荐