翻译键显示在Angular中的翻译之前

编程问答 2022-06-09

问题描述

我目前正面临一个问题，很不幸，我没有找到任何类似的话题。 在Angular应用程序中，在页面加载期间，只有一秒钟的时间，在此期间我们可以在看到翻译本身之前先看到翻译键。

例如，假设我们有一个主页，上面有标题为“大家好！”的翻译。并在我们的i18n文件“ HELLO_EVERYONE”中添加翻译键：在很短的时间内，将显示“ HELLO_EVERYONE”，然后将其替换为翻译“大家好！”。

我们希望尽可能避免这种行为。

我们将Angular 10与ngx-translate一起使用。 我们的AppModule中具有以下配置：

import { browserModule } from '@angular/platform-browser';
import { LOCALE_ID,NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient,HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthorizationGuard } from './shared/guards/authorization-guard';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from 'environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { RootStoreModule } from './store';
import { SharedModule } from './shared/shared.module';
import { CommonModule,registerLocaleData } from '@angular/common';
import { TranslateLoader,TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import * as moment from 'moment';
import localeFr from '@angular/common/locales/fr';

import '@iconfu/svg-inject/dist/svg-inject.min';
import { ShowLoaderRequestList } from './app.constants';
import { LoaderInterceptor } from '@az-fr/om-common';
import { AuthTokenInterceptor } from './shared/interceptors/authTokenInterceptor';
import { WindowRef } from 'ngx-tag-commander';
import { NdbxIconModule } from '@allianz/ngx-ndbx/icon';
import { FileCachingInterceptor } from './shared/interceptors/fileCachingInterceptor';

registerLocaleData(localeFr);
moment.locale('fr');

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,browserAnimationsModule,CommonModule,SharedModule,AppRoutingModule,// Translate configuration
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]
      }
    })
  ],providers: [
    { provide: LOCALE_ID,useValue: 'fr-FR' },],bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http,'assets/i18n/');
}

而且，目前我们的应用程序加载时间很长：您认为这会导致这种行为吗？

期待您的建议！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularinternationalizationngx-translatetranslation