Angular2：複数のモジュールで1つのモジュールインスタンス

Question

ng2-translateプラグインの例を作ってみましょう。

私はルートAppModuleと子供TopPanelModuleとPagesModuleを持っています。

---

私はAppModuleためng2-translateを設定します。 AppComponentで

@NgModule({ 
    imports: [TranslateModule.forRoot({ 
    provide: TranslateLoader, 
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), 
    deps: [Http] 
    })], 
    exports: [] 
}) 
export class AppModule { 
    constructor(translateService: TranslateService) {  
    } 
} 

---

私はTranslateModuleのための言語と基本設定を設定します。 TopPanelComponent、PagesComponent -

@Component(...) 
export class AppComponent { 
    constructor(translateService: TranslateService) { 
    translateService.addLangs(["en", "fr"]); 
    translateService.setDefaultLang('fr'); 

    const browserLang = 'fr'; 
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');  
    } 
} 

---

そして、私は子供たちにTranslateModuleを使用しようとしているコンポーネントをモジュール。それはうまくいきません。パイプがエラーを存在しない、何等の翻訳..この問題を解決するための

---

ない、私はそれにTranslateModuleを設定し、別のモジュールMyTranslateModuleを作成して、私のPagesModuleとTopPanelModuleにこのモジュールを使用しています。

@NgModule({ 
    imports: [TranslateModule.forRoot({ 
    provide: TranslateLoader, 
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), 
    deps: [Http] 
    })], 
    exports: [TranslateModule] 
}) 
export class MyTranslateModule { 
    constructor(translateService: TranslateService) { 
    translateService.addLangs(["en", "fr"]); 
    translateService.setDefaultLang('fr'); 

    const browserLang = 'fr'; 
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en'); 

    console.log('AdminTrModule: calling'); 
    } 
} 

と

@NgModule({ 
    imports: [MyTranslateModule] 
}) 
export class PagesModule{ 

} 

@NgModule({ 
    imports: [MyTranslateModule] 
}) 
export class TopPanelModule{ 

} 

---

これは重要な部分です。それは動作します！しかし、私はそれがTranslateModuleの2つのインスタンスを作成すると思います。したがって、TopComponenttranslateService.use('en')を呼び出すことによってtransalte langaugeを変更すると、言語はTopPanelModuleに変更されますが、PagesModuleでは変更されません。

Answer 1

あなたはシングルトン「1として作成されますモジュールのMyTranslateModule "

export class MyTranslateModule { 

static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: MyTranslateModule , 
     providers: [TranslateService,TRANSLATION_PROVIDERS] 
    }; 
    } 

} 

は、サービスを翻訳し、この場合に

@NgModule({ 
    bootstrap: [App], 
    declarations: [ 
    App 
    ], 
    imports: [ // import Angular's modules 
    BrowserModule, 
    MyTranslateModule.forRoot(), 
    PagesModule, 
    TopPanelModule 
    ], 
    providers: [ // expose our Services and Providers into Angular's dependency ] 
}) 

を以下のようappModule にMyTranslateModuleをインポート中forRoot関数を定義する必要がありますアプリケーションに沿ったインスタンス "