Question

我是新手，我正在尝试保存选择选项标签，该语言已成功保存，但是，即使我选择了阿拉伯语，选择选项也会默认显示英语，当页面刷新时它会返回英语，如果您能帮助我实现这一目标，我将不胜感激

footer.component.html

<div class="form-group">
   <select (change)="switchLanguage($event)" [ngModel]="lang" style="background-color: 
       #b3cee5;" class="form-control customized-dropdown alignleft">
       <option id="myLanguage" *ngFor="let item of Languages">{{item}}</option>
   </select>
</div>

footer.component.ts

directionEn: any;
directionAr: any
language;
userLang;
localsettings: LocalSettingsService;
Languages : any = ['English', 'Arabic'];
lang;


constructor(private translate: TranslateService) {
  translate.setDefaultLang('en');
}

switchLanguage(event) {
if(event.target.value == 'English'){
  this.language = 'en'
  this.lang = event.target.value;
  this.ChangeToEnglish()

} else if(event.target.value == 'Arabic'){
  this.language = 'ar'
  this.lang = event.target.value;
  this.ChangeToArabic();
}
this.translate.use(this.language);
localStorage.setItem('lang', this.lang)
localStorage.setItem('language', this.language);

}

ChangeToEnglish(){
  document.querySelector('body')
  .setAttribute('style', 'direction: ltr; text-align: left; ');
}
ChangeToArabic(){
  document.querySelector('body')
   .setAttribute('style', 'direction: rtl; text-align: right;');
}

ngOnInit() {
  var language = localStorage.getItem('language')
  var lang = localStorage.getItem('lang')

if(language === 'ar' && lang === "Arabic"){
  this.translate.use('ar');
  this.ChangeToArabic();
}
else if(language === 'en' && lang === "English"){
  this.translate.use('en');
  this.ChangeToEnglish()
}

}

Answer 1

尝试一下

constructor(private translate: TranslateService) {
  translate.setDefaultLang(localStorage.getItem('language') ? localStorage.getItem('language') : 'en');
}

Answer 2

我终于找到了解决方案，您只需向每个语句添加一个变量，如下所示：

footer.component.ts

ngOnInit() {
  var language = localStorage.getItem('language')
  var lang = localStorage.getItem('lang')

if(language === 'ar' && lang === "Arabic"){
  this.translate.use('ar');
  this.ChangeToArabic();
  this.bind = "Arabic";
}
else if(language === 'en' && lang === "English"){
  this.translate.use('en');
  this.ChangeToEnglish()
  this.bind = "English";
}

footer.component.html

只需将[（ngModel）] =“ bind”添加到选择标签

<select (change)="switchLanguage($event)" [(ngModel)]="bind"
    style="background-color: #b3cee5;" class="form-control>
  <option id="myLanguage" *ngFor="let item of Languages">{{item}}</option>
 </select>

在下拉菜单中保存最后选择的选项

2 个答案: