切换语言 -> NULL(只是第一种语言)

Question

在我的网页中，我有几种语言

FR | NL | EN | DE | ES | IT | PT 

[STEP 1: OK]

我使用法语，如果我点击控制台上的每种语言，我检索语言的名称:

1main.js:1 Click on the current language  => nl
2main.js:1 Click on the current language  => en
3main.js:1 Click on the current language  => de
4main.js:1 Click on the current language  => es
5main.js:1 Click on the current language  => it
6main.js:1 Click on the current language  => pt

单击当前语言- console.log

switchLanguage(lang) {
if (lang == 'uk') {
lang = 'en';
}
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
this.LS.setItem('LX_Current_Language', event.lang);
console.log("Click on the language  => " + this.LS.getItem('LX_Current_Language')); 
});

this.translate.use(lang);
this.refresh();
}

[步骤2:OK]每次点击语言后，我也会检查开关

Previous language : null
Click on the current language  => nl
-------------------------------------
Previous language : nl
Click on the current language  => en
-------------------------------------
Previous language : en
Click on the current language  => de
-------------------------------------
Previous language : de
Click on the current language  => es
-------------------------------------
Previous language : es
Click on the current language  => it
-------------------------------------
Previous language : it
Click on the current language  => pt

先前的语言- console.log

为什么在以前的语言中我有NULL而没有FR??

因此，我必须在语言EN上点击2次才能正确显示英文文本的内容，存在语言切换问题…

错误

Previous language : null
Click on the current language  => nl
-------------------------------------
Previous language : nl
Click on the current language  => en
-------------------------------------

我不明白问题出在哪里?

export class AuthLayoutComponent implements OnInit {
supportedLangs;
constructor(
public _router: Router,
private translate: TranslateService,
private LS: LocalStoreService,
public _location: Location
) { }
ngOnInit() {
this.supportedLangs = ['fr', 'nl', 'en', 'de', 'es', 'it', 'pt'];
}
switchLanguage(lang) {
if (lang == 'uk') {
lang = 'en';
}
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
this.LS.setItem('LX_Current_Language', event.lang);
console.log("Click on the current language  => " + this.LS.getItem('LX_Current_Language')); 
});

console.log("Previous language : " + this.LS.getItem('LX_Current_Language'));
this.translate.use(lang);
this.refresh();
}
refresh(): void {
this._router.navigateByUrl("/refresh", { skipLocationChange: true }).then(() => {
this._router.navigate([decodeURI(this._location.path())]);
});
}
}

在HTML

<div class="languageSelect">
<a href="#" *ngFor="let l of supportedLangs;" (click)="switchLanguage(l); false; ">
{{ language | uppercase}}
</a>
</div>

Answer 1

当你第一次点击任何语言时，它会运行switchLanguage方法。

this.translate.onLangChange正在获取语言(在订阅中等待可观察的响应)，而您的代码到达

console.log("Previous language : " + this.LS.getItem('LX_Current_Language'));

和this. ls . getitem ('LX_Current_Language')还没有得到任何东西(这是第一次，你还没有在LocalStorage中有任何东西)。

LocalStorage将拥有语言，一旦订阅，等待可观察响应，获得响应并执行"this.LS.settitem("LX_Current_Language",event.lang);">