翻译服务无法在加载页面上运行
Translate service not working on load page
我在使用翻译服务时有一个非常奇怪的行为。我这样配置翻译器:
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 :
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 :
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
当我刷新页面标题时 seo.home.title
所以翻译没有完成,之后如果我切换到另一个页面,然后返回主页,翻译工作正常。如果再次执行 F5 翻译不起作用。当我第一次加载页面时,这个问题无处不在。
提前致谢。
您可以使用应用程序初始化程序预加载默认语言,如下所示
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
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 { }
我在使用翻译服务时有一个非常奇怪的行为。我这样配置翻译器:
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 :
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 :
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
当我刷新页面标题时 seo.home.title
所以翻译没有完成,之后如果我切换到另一个页面,然后返回主页,翻译工作正常。如果再次执行 F5 翻译不起作用。当我第一次加载页面时,这个问题无处不在。
提前致谢。
您可以使用应用程序初始化程序预加载默认语言,如下所示
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
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 { }