2017-02-18 101 views
2

嗨,所有人,並感謝您的幫助提前... 我正在建立一個應用程序,我想有一個服務,是用來處理一些配置和它由不同的模塊共享。 我真的不知道這是否是最好的方法,但我使用這個,因爲angularJS。角2和rxjs服務主體沒有正在更新組件

配置服務

sidebarCompress: Subject<boolean> = new Subject<boolean>(); 
public sidebarCompressed: Observable<boolean> = this.sidebarCompress.asObservable(); 

constructor() {} 

compressSidebar(val: boolean = false) { 
    this.sidebarCompress.next(val); 
    // this is firing when used 
    console.log('changed on service'); 
} 

邊欄組件

constructor(
    private conf: ConfigService, 
) { 
    conf.sidebarCompressed.subscribe(
     sidebarCompressed => { 
      // this is not firing 
      console.log('changed on sidebar component'); 
    }); 
} 

任何其它組分

constructor(
    private conf: ConfigService, 
) { } 

ngOnInit() { 
    // The idea is to use it in a fn (not always on init) 
    this.conf.compressSidebar(true); 
} 

所以,邊欄組件訂閱不起作用,任何人都知道我在這裏做錯了什麼,或者如果我應該採取不同的做法!?

再次,非常感謝。

+0

你在哪裏提供'ConfigService'? –

+0

'ConfigService'在每個模塊中提供。 在這種情況下,我有模塊,我有'SidebarComponent'和一個懶惰的加載模塊調用與試圖壓縮側邊欄的組件。 這兩個模塊都提供了'ConfigService' ... 我也提供'app.module'以及... –

回答

4

如果您在@NgModule()中提供服務,您將爲整個應用程序獲得一個實例,除非您還在延遲加載的模塊的@Component()@NgModule()中提供該服務。在@NgModule()提供

提供商被提升到應用程序根注射器,其中的模塊事務導入順序和模塊在imports: []覆蓋前面的模塊提供者如果提供密鑰匹配後列出。在AppModule s @NgModule()中增加的提供者直接覆蓋導入模塊的提供者。

延遲加載模塊獲取自己的「根作用域」,它是應用程序根注入器的子注入器。

我假設你的問題是由在一個非延遲加載的延遲加載模塊中提供服務引起的,這會導致2個實例。

注入此模塊的組件或服務從應用程序根目錄獲取實例,如果它們是非延遲加載的模塊的一部分,或者在它們是延遲加載模塊的一部分時從延遲加載模塊獲取。

作爲解決方案,從延遲加載的模塊中刪除提供程序。 您也可以在AppModule中執行forRoot()和導入MyLazyLoadedModule.forRoot()以將延遲加載模塊的服務獲取到應用程序根注入器中,並避免重複的服務實例。

+1

非常感謝! 你是完全正確的。 :) –