Angular 2 RC.5單例全局共享服務

我正在嘗試創建全球單例可用服務。我已閱讀此解決方案 - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module，但它不適用於我。Angular 2 RC.5單例全局共享服務

我創建共享模塊（這是我的短爲例）：

NgModule({ 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule 
    ], 
    declarations: [ ShopCartComponent ], 
    exports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     ShopCartComponent, 
    ] 
}) 
export class SharedModule { 
    static forRoot() : ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [ 
       ProductsService, 
       ProductsActions 
      ] 
     }; 
    } 
}

在我根應用模塊：

NgModule({ 
    imports: [ 
     BrowserModule, 
     SharedModule.forRoot(), 
     RouterModule.forRoot(routes) 
    ], 
    declarations: [ AppComponent ], 
    providers: [ 
     provideStore({ 
      ... some stores ... 
     }) 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

但是，當我試圖注入ProductsService | ProductsActions到孩子模塊，棱角分明的表演後跟錯誤信息：

原始異常：無提供ProductsService！

這是我的孩子模塊：

@NgModule({ 
    imports: [ 
     SharedModule, 
     RouterModule.forChild([ 
      { path: '', component: ProductsComponent } 
     ]) 
    ], 
    declarations: [ ProductsComponent ] 
}) 
export default class ProductsModule { }

我已經導入SharedModule。我應該做更多的事情？

---------------- UPDATE -------------------

我已經解決了我問題。我不得不將ProductsModule添加到根模塊的導入中。就像這樣：

@NgModule({ 
    imports: [ 
     BrowserModule, 
     ProductsModule, 
     RouterModule.forRoot(routes), 
     SharedModule.forRoot() 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

的原因（我認爲）是，我想immadiately加載另一個模塊中的根路由表，就像這樣：對所有幫助

{ path: '', loadChildren: 'app/components/products/products.module' },

謝謝你們！

來源

2016-08-12 Kamil Myśliwiec

如果你想共享同一個實例，你不應該在根組件中聲明提供者數組。最好將它保存在共享模塊中。 – micronyks

可能的重複：http://stackoverflow.com/questions/38913976/how-to-set-global-providers-in-angular2-2-0-0-rc-5 – micronyks

它不重複。看看代碼，我使用這個URL的解決方案，但它不適合我。 –

-1

我會將您的服務設置爲共享模塊的providers屬性。

@NgModule({ 
    imports: [ 
    CommonModule, 
    ReactiveFormsModule 
    ], 
    declarations: [ ShopCartComponent ], 
    exports: [ 
    CommonModule, 
    ReactiveFormsModule, 
    ShopCartComponent, 
    ], 
    providers: [ // <----- 
    ProductsService, 
    ProductsActions 
    ] 
}) 
export class SharedModule { 
    (...) 
}

來源

2016-08-12 10:45:48

但它不會創建每個服務的少數情況？我將console.log添加到構造函數中，看起來每個模塊都創建了自己的服務。結果是來自AppModule的我的組件和來自ProductModule的組件使用不同的對象。 –

這實際上是一個不好的建議，因爲https://angular.io/docs/ts/latest/guide/ngmodule.html#!#q-why-it-is-bad –

更新了@ ToanNguyen評論的鏈接：https：/ /angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-why-bad –

Angular 2 RC.5單例全局共享服務

回答

相關問題