问题描述: 在使用Angular 7和ngx-translate库进行多语言支持时,刷新后无法记住当前选择的语言。
解决方法: 要解决这个问题,我们可以使用浏览器的本地存储(localStorage)来存储当前选择的语言,并在应用程序初始化时检查本地存储是否存在语言设置。
首先,我们需要在app.module.ts文件中导入ngx-translate模块,并配置TranslateModule的forRoot方法,如下所示:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
// Http loader factory function
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,我们在app.component.ts文件中添加一些代码来检查本地存储中的语言设置,并使用TranslateService的use()方法来设置当前语言。如果本地存储中没有语言设置,则默认使用英语。
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
{{ 'HOME.TITLE' | translate }}
`
})
export class AppComponent {
constructor(private translate: TranslateService) {
// Check localStorage for language setting
const language = localStorage.getItem('language');
if (language) {
translate.use(language);
} else {
translate.setDefaultLang('en');
translate.use('en');
}
}
switchLanguage() {
// Toggle between English and Chinese
this.translate.use(this.translate.currentLang === 'en' ? 'zh' : 'en');
// Store language setting in localStorage
localStorage.setItem('language', this.translate.currentLang);
}
}
这样,每当用户刷新页面时,应用程序将从localStorage中读取语言设置,并使用TranslateService设置当前语言。
请注意,这只是一种解决方法,并且可以根据你的需求进行调整。你可以选择使用其他类型的本地存储(如sessionStorage)或使用其他方式来存储和读取语言设置。