ng2-übersetzen funktioniert nicht im lazy-Modul geladen
Ich bin mit der ng2-übersetzen für den Umgang mit Sprache in eine Eckige 2 RC5 app, die ich erschaffe. Die app hat zwei feature-Module, ein lazy geladen und eine eifrig geladen. TranslateModule zur Verfügung gestellt wird, über eine gemeinsame Modul. Das problem ist, dass die übersetzen Rohr funktioniert gut in der eager-Modul geladen, aber nicht faul-eins geladen. Um zu überprüfen, es hat zu tun mit der be-Methode, die ich konvertiert sowohl eager-loading und alles hat gut funktioniert.
Ein-plunk, das veranschaulicht das Problem kann hier gefunden werden: Plunker Der wesentliche code ist unten, wie gut.
Die erste Seite ist, die darauf geladen, deshalb, warum die Saiten gut Aussehen. Klicken Sie auf Login und es geht an die faul-eins geladen wo alle Zeichenfolgen in Großbuchstaben, d.h. nicht übersetzt.
Jede mögliche Hilfe würde geschätzt.
app.Modul:
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:
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.Komponente:
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');
}
}
geteilt.Modul:
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 {}
willkommen.Modul (eager geladen)
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 { }
willkommen.Komponente:
import { Component } from '@angular/core';
@Component({
template: `
<h2>{{ 'PLEASELOGIN' | translate }}</h2>
<nav><a routerLink="/backend">{{ 'LOGIN' | translate }}</a></nav>
`
})
export class WelcomeComponent { }
willkommen.routing
import { RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome.component';
export const routing = RouterModule.forChild([
{ path: 'welcome', component: WelcomeComponent}
]);
backend.Modul (lazy geladen)
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 { }
backend.Komponente:
import { Component } from '@angular/core';
@Component({
template: `
<h2>{{ 'WELCOME' | translate }}</h2>
<nav><a routerLink="/welcome">{{ 'LOGOUT' | translate }}</a></nav>
`
})
export class BackendComponent { }
backend.routing
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"
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche problem. Hinzufügen TranslateLoader und TranslateService der forRoot Methode hat das problem gelöst.
Obwohl die akzeptierte Antwort wies mich in die richtige Richtung, der übersetzer war nicht in der lazy geladene Modul. In anderen Modulen gearbeitet wurde.
Ich hatte zu injizieren, die TranslatorService wieder in die lazy geladen Moduls Hauptkomponente und init der Sprache Einstellungen wie ich getan habe in der app.Komponente.ts