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

來源

2016-04-28 Ed Michel

看到更多的代碼可以讓你更容易地想知道爲什麼我以前沒有回答，但是在這裏:) –

你檢查過'newMarchant'實際上是否被調用，並且在**訂閱後也被稱爲**？ –

只是添加了答案，並使問題更明顯地看到錯誤（組件裝飾器）。 –

我的問題不是代碼，而是我如何在組件中使用/聲明服務。通過在裝飾器中的兩個組件中定義該服務

@Component({ 
    providers: [MasterdataService] 
})

角度實例化每個組件的單獨服務。這樣，兩個組件之間就不能執行通信。由於我有一個根組件（AppComponent），我可以在該裝飾器中聲明服務，並通過將服務作爲兩個組件類的構造函數中的參數來處理其餘的部分（DI a.k.a依賴注入）。

來源

2016-04-28 13:27:51

角2 - 共享服務訂閱

回答

相關問題