Discussion :

[Tamzoro]

Bonjour,

Je bloque sur le switch de langue, j'ai 7 langues dans le header de ma page.



Je suis en français, lorsque je clique en NL, la page s'affiche correctement en néerlandais. Par contre, lorsque je bascule du NL à EN, il ne se passe rien après le clique, je dois donc recliquer une seconde fois pour afficher la page en Anglais.

Si je clique après sur DE ça fonctionne parfaitement, puis si je clique sur ES, j'ai de nouveau le même problème, il faut que je clique 2 fois sur ES pour afficher le contenu en Espagnole.



Dans le fichier auth-layout.component.html j'ai ceci (je pense qu'il n'y a pas de problème ci dessous?)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<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>

Par contre, je pense que le soucis est plutôt au niveau de auth-layout.component.ts

Je pense que le problème est au niveau du changement de langue, mais je ne vois pas trop ce qui peut poser problème?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 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();
  }

Voici le code en entier si ça peut aider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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())]);
    });
  }
 
}

D'avance merci pour votre aide.

[krakatoa]

essaye comme ça pour voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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'];

    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'));
    });
  }
 
 
  switchLanguage(lang){
    if(lang == 'uk'){
      lang = 'en';
    }
 

    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())]);
    });
  }
 
}

[Tamzoro]

Bonjour Krakaotoa,

Merci pour ton aide, j'ai toujours le même soucis. Je me demande s'il n'est pas mieux de recommencer tout le code?

[krakatoa]

je ne sais pas.
si tu pouvais mettre cette partie sur stackblitz
parceque là, c'est difficile de voir le problème


j'ai mis des blocs en commentaire
regarde si le probleme du double clic arrive encore ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
 
  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())]);
*/
    });
  }

[Tamzoro]

Merci pour ton aide, j'ai recommencé le truc c'est plus simple. Le code était affreux.

Merci encore pour ton aide.