Angular2: Eine Instanz des Moduls in mehreren Modulen

Question

Lassen Sie uns ein Beispiel für ng2-translate Plugin machen.

Ich habe root AppModule, und Kinder TopPanelModule und PagesModule.

---

ich konfigurieren ng2-translate für AppModule.

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

---

In AppComponent stelle ich Sprachen und Grundkonfiguration für TranslateModule.

@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');  
    } 
} 

---

Und dann Module Komponenten Ich versuche TranslateModule zur Anwendung bei Kindern - TopPanelComponent, PagesComponent. Es funktioniert nicht. Rohr nicht vorhanden Fehler, keine übersetzen etc ..

---

Um dieses Problem zu lösen, ich erstellen ein eigenes Modul MyTranslateModule, konfigurieren TranslateModule darauf und verwenden dieses Modul in meinem PagesModule und 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'); 
    } 
} 

und

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

} 

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

} 

---

Dies ist wichtiger Bestandteil. Es funktioniert! Aber ich denke, es schafft zwei Instanzen von TranslateModule, also, wenn ich transalte Sprache durch den Aufruf von TopComponenttranslateService.use('en') ändern, ändern Sie die Sprache in TopPanelModule, aber nicht in PagesModule.

Answer 1

Sie benötigen eine forRoot Funktion im Modul 'MyTranslateModule' importiert

export class MyTranslateModule { 

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

} 

dann definieren MyTranslateModule in appModule folgend

@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 ] 
}) 

in diesem Fall Service übersetzen wird als Singletons „one erstellt werden Instanz entlang der Anwendung "