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

Question

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

页脚.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>

页脚.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');
}