点击 2 次语言后，语言切换工作

Question

I have a problem with the language switch. I have 7 languages on my website.

If I click on FR , the page is translated correctly. If I click on NL also, the page is translated correctly.

However, If I click on EN , nothing is happening... I have to click 2 times to display the page in English . I don't understand why?

Then...

If I click on DE , the page is translated correctly.

But, If I click on ES , nothing is happening... I have the same probleme in English. I have to click 2 times to display the page in Spanish.

In IT et PT , I don't have any problems.

Here is an idea of the file -> auth-layout.component.html

<div class="languageSelect">
   <a href="#" *ngFor="let l of supportedLangs; let i = index" (click)="switchLanguage(l); false; ">
       {{ l | uppercase}}  <!-- FR | NL | EN | DE | ES | IT | PT -->
   </a>
</div>

In the file -> auth-layout.component.ts I have this in JS, I don't see where is the error?

if you have an idea, I am interested, because I am stuck.

@Component({
  selector: 'app-auth-layout',
  templateUrl: './auth-layout.component.html',
  styleUrls: ['./auth-layout.component.scss']
})
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("LELOG OK X : " + this.LS.getItem('LX_Current_Language'));
    });
    console.log("LELOG OK A : " + 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())]);
    });
  }

}

Thank you for your time.

Answer 1

If translate.onLangChange is a Subject that's updated when you call translate.use(lang) you may need to subscribe to only the first emitted value, otherwise the subscription function might continue being triggered for the languages you clicked before. Have you tried :

this.translate.onLangChange.pipe(take(1)).subscribe(...