我是 Angular 2 的新手,我在 ngx-translate 组件中有以下问题(通过服务器上的 Http 请求的 URL 必须是绝对的。URL:./assets/i18n/en.json)。我确信这个 en.json 文件在那里,因为我向它发出 http 请求并且请求成功
这是我的 app.module.server.ts 文件:
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { HttpModule, Http } from '@angular/http';
import {
TranslateModule,
TranslateLoader,
MissingTranslationHandler,
MissingTranslationHandlerParams
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
return '[' + params.key + ']';
}
}
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
ServerModule,
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
...sharedConfig.imports
]
})
export class AppModule {
}
这是我的 app.module.cleint.ts 文件:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule,Http } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import {
TranslateModule,
TranslateLoader,
MissingTranslationHandler,
MissingTranslationHandlerParams
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
return '[' + params.key + ']';
}
}
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
FormsModule,
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
...sharedConfig.imports
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
{
provide: MissingTranslationHandler,
useClass: MyMissingTranslationHandler
}
]
})
export class AppModule {
}
这是我的 app.module.shared.ts 文件:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpModule, Http } from "@angular/http";
import { BrowserModule } from "@angular/platform-browser";
import { TranslateModule} from '@ngx-translate/core';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { EmployeesListComponent } from './components/employees/EmployeesList.component';
import { CounterComponent } from './components/counter/counter.component';
export const sharedConfig: NgModule = {
bootstrap: [AppComponent],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
EmployeesListComponent,
HomeComponent
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'employees-list', component: EmployeesListComponent },
{ path: '**', redirectTo: 'home' }
]),
BrowserModule,
HttpModule,TranslateModule
]
, exports: [
TranslateModule
]
};