Angular2: Один экземпляр модуля в нескольких модулях

Question

Давайте сделаем пример для плагина ng2-translate.

У меня есть корень AppModule, и дети TopPanelModule и PagesModule.

---

настроить ng2-translate для 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) {  
    } 
} 

---

В AppComponent я установил языки и базовую конфигурацию для 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');  
    } 
} 

---

И тогда я пытаюсь использовать TranslateModule детей модулей компонентов - TopPanelComponent, PagesComponent. Он не работает. Труба не существует ошибка, не переводить и т.д ..

---

Для решения этой проблемы я создаю отдельный модуль MyTranslateModule, настроить TranslateModule на него, и использовать этот модуль в моем 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, поэтому, когда я меняю transalte langauge, вызывая TopComponenttranslateService.use('en'), он меняет язык на TopPanelModule, но не в PagesModule.

Answer 1

Вы должны определить функцию forRoot в модуле «MyTranslateModule»

export class MyTranslateModule { 

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

} 

затем импортировать MyTranslateModule в appModule следующим

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

в этом случае перевести сервис будет создан как одиночки «один пример по заявке «