翻译服务在加载页面上不起作用 [英] Translate service not working on load page

问题描述

我在使用翻译服务时有一个非常奇怪的行为.我这样配置翻译器:

I have a very strange behaviour when using translate service. I configure the translator like this :

export class AppComponent implements OnInit {


constructor(
    private translateService: TranslateService,
    angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
    angulartics2: Angulartics2,
    router: Router,
    private googleAnalyticsService: GoogleAnalyticsService,
) {
     translateService.setDefaultLang('en');
     translateService.use('en');
}

还有我的 HomeComponent :

And My HomeComponent :

export class HomePageComponent implements OnInit {
constructor(
    private seoService: SeoService,
    private translateService: TranslateService
) {
}

ngOnInit() {
    this.addPageMeta();
    console.log('Add Page Meta');
}

addPageMeta() {
const title = this.translateService.instant('seo.home.title');
const meta: SeoMeta = {
  url : '/home',
  title: title,
  description: this.translateService.instant('seo.home.description'),
};
this.seoService.setPageTitle(title);
this.seoService.addMeta(meta);
}
}

Core.module.ts :

Core.module.ts :

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

当我刷新时，我的页面标题中有 seo.home.title 所以翻译没有完成，之后如果我切换到另一个页面，然后回到主页，翻译正在工作.如果再做一次 F5 翻译不起作用.当我加载第一次页面时，这个问题无处不在.

When I do a refresh I have in title of my page seo.home.title so the translation is not done, after that if I swith to another page, after that back to homepage, translations is working. If again a do an F5 translation didn't work. And this problem is everywhere when I load first time page.

提前致谢.

推荐答案

您可以使用应用程序初始化程序预加载默认语言，如下所示

you can preload default language with application initializer as follow

translation.config.ts

translation.config.ts

import { Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { LOCATION_INITIALIZED } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

export function ApplicationInitializerFactory(
  translate: TranslateService, injector: Injector) {
  return async () => {
    await injector.get(LOCATION_INITIALIZED, Promise.resolve(null));

    const deaultLang = 'fr';
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang(deaultLang);
    try {
      await translate.use(deaultLang).toPromise();
    } catch (err) {
      console.log(err);
    }
    console.log(`Successfully initialized ${deaultLang} language.`);
  };
}

app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, Injector } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import {TranslateModule, TranslateService, TranslateLoader} from '@ngx-translate/core';
import { ApplicationInitializerFactory, HttpLoaderFactory } from './translation.config';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [ HttpClient ]
      }
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: ApplicationInitializerFactory,
      deps: [ TranslateService, Injector ],
      multi: true
    },
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

示例链接

这篇关于翻译服务在加载页面上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！