我正在使用“@ngx-translate/core”库来应用国际化，我为它创建了一个帮助服务并在我的所有模块中配置了它，我还安装了“ngx-translate-multi-http-loader”，允许读取多个键，然后根据所需的语言从英语或法语文件中获取其值。 我的问题是我的应用程序模块中的导入没有在 shild 模块中被覆盖，这是我的代码。
这是我的子模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckinCkeckoutRackRoutingModule } from './checkin-ckeckout-rack-routing.module';
import { IndexComponent } from './index/index.component';
import { LoadRackComponent } from './load-rack/load-rack.component';
import { RackInfoComponent } from './rack-info/rack-info.component';
import { RackActionComponent } from './rack-action/rack-action.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RackService } from '../../setup/manage-rack/service/rack.service';
import { ModalModule } from 'ngx-bootstrap/modal';
import { RacktransactionService } from '../service/racktransaction.service';
import { ManagestorageService } from '../../setup/manage-storage/services/managestorage.service';
import { SamplestoragelogserviceService } from '../../sample-storage-log/services/samplestoragelogservice.service';
import { FormsModule } from '@angular/forms';
import { SearchCriteriaService } from '../service/searchcriteriadata.service';
import { HttpBackend } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpLoaderFactory } from '@/shared/helpers/helper-transalation.service';
@NgModule({
declarations: [IndexComponent, LoadRackComponent, RackInfoComponent, RackActionComponent],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
CheckinCkeckoutRackRoutingModule,
ModalModule.forRoot(),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (httpBackend: HttpBackend) => HttpLoaderFactory(httpBackend, 'sample-storage'),
deps: [HttpBackend]
}
})
],
providers: [
RackService,
RacktransactionService,
ManagestorageService,
SamplestoragelogserviceService,
RackService,
SearchCriteriaService,
],
})
export class CheckinCkeckoutRackModule { }
这是我的应用程序模块：
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MegaMenuModule } from 'primeng/megamenu';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { MenubarModule } from 'primeng/menubar';
import { DropdownModule } from 'primeng/dropdown';
import { MessageService } from 'primeng/api';
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';
import { MenuModule } from '@progress/kendo-angular-menu';
import { ToastyModule, ToastyService } from 'ng2-toasty';
import { AngularMaterialModule } from '@material-controls-module/angular-material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';
import { GridModule } from '@progress/kendo-angular-grid';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { HttpClientModule, HttpClient, HttpBackend } from '@angular/common/http';
import { ConfigService } from '@core-services/config.service';
import { getBaseUrl } from '@shared-helpers/helper-url';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { ConfirmDialogComponent } from '@shared-components/base-component/confirmDialog/confirm-dialog/confirm-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { InterceptorsList } from './core/interceptor/Interceptors';
import { LoaderServiceModule } from './core/layout/loader/loader-service.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { RegistrationService } from './modules/registration/Services/registration.service';
import { ToolsModule } from './modules/tools/tools.module';
// tslint:disable-next-line:max-line-length
import { PatientLastVisitComponent } from './modules/registration/component/Dialogs/patient-last-visit/patient-last-visit.component';
import { DynamicFileUploadComponent } from './dynamic-control-module/controls/dynamic-file-upload/dynamic-file-upload.component';
import { SharedFileUploadComponent } from './dynamic-control-module/controls/shared-file-upload/shared-file-upload.component';
import { DatePipe } from '@angular/common';
import { DyanmicRegFormService } from './modules/registration/Services/DynamicRegisterationServices/reg-dynamic-form.service';
import { LoyaltyModule } from './modules/loyalty/loyalty.module';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { HttpLoaderFactory } from './shared/helpers/helper-transalation.service';
import { KendoDatepickerComponent } from './shared/components/kendo-datepicker/kendo-datepicker.component';
import { KendoTimepickerComponent } from './shared/components/kendo-timepicker/kendo-timepicker.component';
@NgModule({
declarations: [
AppComponent,
ConfirmDialogComponent,
PatientLastVisitComponent,
DynamicFileUploadComponent,
SharedFileUploadComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MegaMenuModule,
ButtonsModule,
MenubarModule,
DropdownModule,
ToastyModule,
MessagesModule,
MessageModule,
ToastModule,
MenuModule,
GridModule,
AngularMaterialModule,
TreeViewModule,
DropDownsModule,
HttpClientModule,
LayoutModule,
ToolsModule,
MatDialogModule,
LoaderServiceModule,
ModalModule.forRoot(),
ToastyModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (httpBackend: HttpBackend) => HttpLoaderFactory(httpBackend, 'app'),
deps: [HttpBackend]
}
}),
LoyaltyModule
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: setConfig,
multi: true,
deps: [HttpClient, ConfigService]
},
DatePipe,
MessageService,
ToastyService,
Title,
InterceptorsList,
RegistrationService,
DyanmicRegFormService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function setConfig(http: HttpClient, configService: ConfigService) {
return async () => {
const resp = await http.get(getBaseUrl() + 'config.json').toPromise();
configService.configuration = <any>resp;
};
}
这是我的翻译助手服务：
import { HttpBackend } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";
@Injectable({
providedIn: 'root',
})
export class TranslationHelperService {
/**
*
*/
constructor(private readonly translate: TranslateService) {
this.translate.use('en');
}
/**
*
* @param resourceKey
* @param resourceKeyParamters
* @returns Promise<string>
*/
public async getTransaltedMsg(resourceKey: any, resourceKeyParamters: any = null):Promise<string> {
if (!resourceKeyParamters) {
return await this.translate.get(resourceKey).toPromise();
} else {
return await this.translate.get(resourceKey, resourceKeyParamters).toPromise();
}
}
}
/**
*
* @param _httpBackend
* @param moduleName
* @returns
*/
export function HttpLoaderFactory(_httpBackend: HttpBackend, moduleName: string) {
return new MultiTranslateHttpLoader(_httpBackend, [
{prefix: './assets/i18n/shared/', suffix: '.json'},
{prefix: `./assets/i18n/${moduleName}/`}
]);
}
导入：TranslateModule在子模块中没有被覆盖，并且总是发送字符串：'app'而不是'sample-storage'，需要知道原因以及如何解决吗？
请在src/assets/i18n目录中创建翻译文件。
然后为您要在应用程序中使用的不同语言创建 json 文件。这是目录示例 -
这就是编写 json 文件的方式。
//en.json
{
"signin": "Please enter your credentials.",
"signup": "Please create a new account"
}
// es.json
{
"signin": "Por favor, ingresa tus credenciales.",
"signup": "Por favor, crea una nueva cuenta."
}