Switch language -> NULL

Version imprimable

Bonjour,

Dans ma page d'accueil, j'ai plusieurs langues:

Code:

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

Lorsque l'utilisateur navigue sur la page d'accueil, la page est automatiquement en français. Quand le user bascule du français en néerlandais, j'ai aucun souci, la page est bien traduite mais en revanche lorsque le user bascule du néerlandais à l'anglais. Il y a un bug, la traduction n'est pas chargée. Je dois recliquer une seconde fois pour que la traduction charge. Après quand je bascule sur les autres langues, il n'y a pas de soucis.

Le problème est uniquement quand je passe du NL -> EN.

En mettant plusieurs "console.log" j'aimerai comprendre ce qui ne va pas.

J'ai testé le clic sur chaque langue et je récupère bien le nom de la langue
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 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(); }
Voici une image

https://zupimages.net/up/21/33/forr.png

Maintenant, si je veux faire un console.log pour vérifier la langue précédente et la langue actuelle.
Code:

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 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())]); }); } }
https://zupimages.net/up/21/33/ey42.png

Le switch entre le FR -> NL est "null" , je pense que c'est à cause de ça que ça bug entre NL -> EN ?

https://zupimages.net/up/21/33/w0wb.png

Si vous avez une idée, je suis preneur.

19/08/2021, 12h48
krakatoa

si tu peux mettre cette partie sur stackblitz en reproduisant le probleme.
avec juste une page de test et la traduction et le select !

parceque là, comme ça ! aucune idée
20/08/2021, 22h34
Tamzoro

Bonsoir Krakaota,

Ce code ne vient de moi, c'est un vrai brol. J'ai essayé plusieurs fois de l'exécuter via Stackblitz, je ne suis pas arrivé, je pense qu'il manque un truc? :?

Si tu veux y jeter un oeil ça serait sympa, après ne te casse pas trop la tête, je trouverai une autre solution...
https://stackblitz.com/edit/angular-.../app.module.ts

Merci en tout les cas d'avoir répondu à mon poste.:aie:

Code:

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
41
 
import { Component, Inject, OnInit, VERSION } from '@angular/core';
 
import { Location, DOCUMENT } from '@angular/common';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { LocalStoreService } from './shared/services/local-store.service';
/*
import { LocalStoreService } from 'src/app/shared/services/local-store.service';
*/
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  supportedLangs: string[];
 
  constructor(
    private translate: TranslateService,
    private LS: LocalStoreService,
    public _location: Location,
    @Inject(DOCUMENT) private _document: Document
  ) {}
 
  ngOnInit() {
    this.supportedLangs = ['fr', 'nl', 'en', 'de', 'es', 'it', 'pt'];
    this.translate.setDefaultLang('fr');
    console.log('hello ' + this.supportedLangs);
  }
 
  switchLanguage(lang) {
    if (lang == 'uk') {
      lang = 'en';
    }
    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      this.LS.setItem('LX_Current_Language', event.lang);
    });
    this.translate.use(lang);
  }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="header">
    <div class="languageSelect">
        <a href="#" *ngFor="let l of supportedLangs;" (click)="switchLanguage(l); false; ">
            {{ l | uppercase}} <span> | </span>
        </a>
 
    </div>
</div>
 
<h2>{{ 'demo.text' | translate }}</h2>

je switch en fr et en, ça fonctionne
les autres il n'y a rien, c'est normal vu que dans /assets/118n/nl.json et les autres sont vides !

voici un autre exemple :
https://stackblitz.com/edit/angular-translate-demo

20/08/2021, 23h27
Tamzoro

Bravo à toi ! Tu as résolu mon problème, je suis bloqué sur ce truc depuis 5 jours !! :mouarf::aie:

Effectivement, j'ai traduit juste 2 langues sur l'url, mais merci infiniment.

Je vais prendre des notes et conserver précieusement tes codes.

Encore une fois un énorme merci !! :D

Le dropdown list est intéressant...

Bravo à toi ! Tu as résolu mon problème, je suis bloqué sur ce truc depuis 5 jours !!

c'est en cherchant qu'on devient plus fort :)
n'hésite pas à poser des questions sur le forum !

https://material.angular.io/components/select/overview
Code:

1 2 3 4 5 6 7 8 9 10 <mat-form-field appearance="fill"> <mat-label>Cars</mat-label> <select matNativeControl required> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </mat-form-field>
c'est avec <option que tu fait un *ngFor sur ta liste de langue ;)

Citation:
Envoyé par krakatoa
https://material.angular.io/components/select/overview
Code:

1 2 3 4 5 6 7 8 9 10 <mat-form-field appearance="fill"> <mat-label>Cars</mat-label> <select matNativeControl required> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </mat-form-field>
c'est avec <option que tu fait un *ngFor sur ta liste de langue ;)
Merci infiniment pour toutes tes explications, je vais prendre des notes.

20/08/2021, 23h37
krakatoa

n'hésite pas à poser des questions.
bien souvent, si tu met un exemple sur stackblitz c'est plus facile pour nous !

astuces :

par exemple, si tu dois mettre en place un système de langue comme tu l'a fait :

regarde sur des exemples sur stackblitz, tape sur google : stackblitz angular translation
tu peux trouver aussi du code sur github, dans la barre de recherche : angular translation (et tu filtres sur : recently updated)

etudie du code avant de te lancer, sinon tu va galerer ;)

bien sur, il y a la doc officielle mais c'est plus long !
20/08/2021, 23h42
Tamzoro

Oui c'est ce que je vais faire, à partir de maintenant je vais utiliser plus souvent stackblitz.

Merci en tout les cas pour tout tes conseils, je vais les suivre.

J'ai encore plein d'autres questions dans ma tête à poser, ça arrivera ce week-end voir début de semaine. :mouarf::aie::ptdr: