问题描述: 在使用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)或使用其他方式来存储和读取语言设置。