Angular2 Observable service dosen't似乎是跨組件工作

我在Angular2中有一個應用程序。哪裏有一個包含導航鏈接的頂級組件等等。路由器插座嵌套在這裏。我希望對這些嵌套頁面之一進行操作，以反映頂層組件中的更改。Angular2 Observable service dosen't似乎是跨組件工作

我試圖在Angular2中實現Observable服務。它在同一個組件內工作。但是當我嘗試從根級別訂閱Observable時。我沒有得到任何事件。

我的服務是這樣的：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class Announcer { 

    // Observable sources 
    private cartTotalSource = new Subject<number>(); 
    private wishlistTotalSource = new Subject<number>(); 

    // Observable sources 
    cartTotalAnnounced$ = this.cartTotalSource.asObservable(); 
    wishlistTotalAnnounced$ = this.wishlistTotalSource.asObservable(); 

    // Service message commands 
    announceCartChange(value: number) { 
     this.cartTotalSource.next(value); 
    } 
    announceWishlistChange(value: number) { 
     this.wishlistTotalSource.next(value); 
    } 
}

當我在它的工作原理成分的情況下使用它，我可以宣佈，並在同一文件中訂閱的更新：

ngOnInit(){ 
    this.announcer.cartTotalAnnounced$.subscribe(total => { 
     this.cartTotal = total; 
    }); 
    this.announcer.wishlistTotalAnnounced$.subscribe(total => { 
     this.wishlistTotal = total; 
    }); 
} 

getCartAndWishlistTotal() { 
    this.cartService.getCartTotal(CartType.Cart, "") 
     .subscribe(total => { 
      this.announcer.announceCartChange(total); 
     }); 

    this.cartService.getCartTotal(CartType.Wishlist, "") 
     .subscribe(total => { 
      this.announcer.announceWishlistChange(total); 
     }); 
}

但是，在我的頂級組件中（使用上面代碼片段中的ngOnInit（）中完全相同的代碼）。用戶從不會觸發。

任何人都可以指出我在做錯什麼嗎？

來源

2016-08-25 Droxx

你是否在根的提供者中註冊你的服務？ –

檢查您的Announcer服務提供商。你是否提供頂層以及你想要的組件？

如果您可能正在創建服務的兩個實例。

您應該只在頂層組件中提供Announcer服務。

希望這有助於！

來源

2016-08-25 02:27:06

太好了。這解決了問題，謝謝！由於我非常規地實現了角度，因此我一直在習慣於每個文件中提供我的服務。這個項目從一個小小的解決方案成長爲一個問題，並隨着時間的推移逐漸發展成爲一個單頁面應用程序。 – Droxx

Angular2 Observable service dosen't似乎是跨組件工作

回答

相關問題