ng2-translate 在延迟加载模块中不起作用 [英] ng2-translate not working in lazy-loaded module
问题描述
我正在创建的 Angular 2 RC5 应用程序中使用 ng2-translate 进行语言处理.该应用程序有两个功能模块,一个是延迟加载的,一个是预先加载的.TranslateModule 通过共享模块提供.问题是翻译管道在预先加载的模块中工作正常,但在延迟加载的模块中工作正常.为了验证它是否与加载方法有关,我将两者都转换为预先加载并且一切正常.
I'm using ng2-translate for language handling in an Angular 2 RC5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded. TranslateModule is made available through a shared module. The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. To verify it has to do with the loading method I converted both to eager-loading and everything worked fine.
可以在此处找到演示该问题的 plunk:Plunker 重要的代码是下面也是.
A plunk that demonstrates the issue can be found here: Plunker The significant code is below as well.
初始页面是预先加载的页面,因此字符串看起来不错.单击登录,它将转到延迟加载的所有字符串都是大写的,即未翻译.
The initial page is the eager-loaded one, hence why the strings look fine. Click Login and it will go to the lazy-loaded one where all strings are upper-case, i.e. not translated.
任何帮助将不胜感激.
app.module:
app.module:
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.routing:
app.routing:
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);
应用程序组件:
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.module:
shared.module:
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 {}
welcome.module(热切加载)
welcome.module (eager loaded)
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 { }
welcome.component:
welcome.component:
import { Component } from '@angular/core';
@Component({
template: `
<h2>{{ 'PLEASELOGIN' | translate }}</h2>
<nav><a routerLink="/backend">{{ 'LOGIN' | translate }}</a></nav>
`
})
export class WelcomeComponent { }
welcome.routing
welcome.routing
import { RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome.component';
export const routing = RouterModule.forChild([
{ path: 'welcome', component: WelcomeComponent}
]);
backend.module(延迟加载)
backend.module (lazy loaded)
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"
}
推荐答案
我遇到了同样的问题.在 forRoot 方法中添加 TranslateLoader 和 TranslateService 解决了问题.
I had the same problem. Adding TranslateLoader and TranslateService to the forRoot method solved the problem.
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],
};
}
}
这篇关于ng2-translate 在延迟加载模块中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!