ng2-translate не работает в лениво загруженном модуле
Я использую ng2-translate для обработки языка в приложении Angular 2 RC5, которое я создаю. Приложение имеет два функциональных модуля, один ленивый загружен и один нетерпеливый загружен. TranslateModule доступен через общий модуль. Проблема в том, что translate pipe отлично работает в модуле с нетерпеливой загрузкой, но не с ленивой загрузкой. Чтобы убедиться, что это связано с методом загрузки, я преобразовал оба в нетерпеливую загрузку, и все работало нормально.
Планк, который демонстрирует проблему можно найти здесь:Plunker значительный код также ниже.
начальная страница является нетерпеливо загруженной, поэтому строки выглядят нормально. Нажмите Login, и он перейдет к лениво загруженному, где все строки имеют верхний регистр, т. е. не переведены.
любая помощь будет оцененный.
app.модуль:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { AppComponent } from './app.component';
import { WelcomeModule } from './welcome/welcome.module';
import { routing } from './app.routing';
@NgModule({
imports: [ BrowserModule, WelcomeModule, TranslateModule.forRoot(), routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.маршрутизация:
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
{ path: '', redirectTo: 'welcome', pathMatch: 'full'},
{ path: 'backend', loadChildren: 'app/backend/backend.module' }
];
export const routing = RouterModule.forRoot(routes);
app.компонент:
import { Component } from '@angular/core';
import { TranslateService } from 'ng2-translate/ng2-translate';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
}
shared.модуль:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { TranslateModule } from 'ng2-translate/ng2-translate';
@NgModule({
imports: [
CommonModule,
HttpModule,
TranslateModule.forRoot()
],
exports: [
CommonModule,
TranslateModule
],
})
export class SharedModule {}
добро пожаловать.модуль (нетерпеливый загружен)
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { WelcomeComponent } from './welcome.component';
import { routing } from './welcome.routing';
@NgModule({
imports: [ SharedModule, routing ],
declarations: [ WelcomeComponent ]
})
export class WelcomeModule { }
добро пожаловать.компонент:
import { Component } from '@angular/core';
@Component({
template: `
<h2>{{ 'PLEASELOGIN' | translate }}</h2>
<nav><a routerLink="/backend">{{ 'LOGIN' | translate }}</a></nav>
`
})
export class WelcomeComponent { }
добро пожаловать.маршрутизация
import { RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome.component';
export const routing = RouterModule.forChild([
{ path: 'welcome', component: WelcomeComponent}
]);
бэкэнд.модуль (ленивый загружено)
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';
@NgModule({
imports: [ SharedModule, routing ],
declarations: [ BackendComponent ]
})
export default class BackendModule { }
бэкэнд.компонент:
import { Component } from '@angular/core';
@Component({
template: `
<h2>{{ 'WELCOME' | translate }}</h2>
<nav><a routerLink="/welcome">{{ 'LOGOUT' | translate }}</a></nav>
`
})
export class BackendComponent { }
бэкэнд.маршрутизация
import { Routes, RouterModule } from '@angular/router';
import { BackendComponent } from './backend.component';
const routes: Routes = [
{ path: '', component: BackendComponent }
];
export const routing = RouterModule.forChild(routes);
en.в JSON
{
"LOGIN": "Login",
"LOGOUT": "Logout",
"WELCOME": "Welcome!",
"PLEASELOGIN": "Please Login"
}
2 ответов
У меня была та же проблема. Добавление TranslateLoader и TranslateService в метод forRoot решило проблему.
import {TranslateModule, TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
@NgModule({
imports: [..,TranslateModule],
declarations: [..],
exports: [ .., TranslateModule]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
function translateLoader(http: Http) {
return new TranslateStaticLoader(http, 'i18n', '.json');
}
return {
ngModule: SharedModule,
providers: [UserService, ItemService, {
provide: TranslateLoader,
useFactory: translateLoader,
deps: [Http]
},
TranslateService],
};
}
}
хотя принятый ответ указал мне в правильном направлении, переводчик не работал в ленивом загруженном модуле. В других модулях он работал.
мне пришлось снова ввести TranslatorService в основной компонент ленивого загруженного модуля и init языковые настройки, как я сделал в приложении.деталь.ТС
export class MainComponentOfLazyLoadedModule implements OnInit {
constructor(private translate: TranslateService) {
Language.currentLang = "en";
translate.addLangs(["en", "sp"]);
translate.setDefaultLang(Language.currentLang);
translate.use(Language.currentLang);
}
ngOnInit() {
}
}