javascript Angular“@ngx-translate/core”库TranslateModule在根中声明,但在Child模块中未被覆盖

nbewdwxp  于 6个月前  发布在  Java
关注(0)|答案(1)|浏览(62)

我正在使用“@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 { }

字符串
这是我的App模块:

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',需要知道原因以及如何解决?

vc9ivgsu

vc9ivgsu1#

请在 *src/assets/i18 n * 目录下创建翻译文件
然后为你想在应用中使用的不同语言创建json文件。下面是目录示例-
这就是你如何编写json文件的方法。
简体中文

{
  "signin": "Please enter your credentials.",
  "signup": "Please create a new account"
}

字符串
简体中文

{
  "signin": "Por favor, ingresa tus credenciales.",
  "signup": "Por favor, crea una nueva cuenta."
}

相关问题