Discussion :

[Tamzoro]

Bonjour,

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

Code :

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

 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 :

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

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




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

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

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



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

[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

[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.

[krakatoa]

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
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 :

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

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

[Tamzoro]

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

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 !!

Le dropdown list est intéressant...

[krakatoa]

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 :

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

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

[Tamzoro]

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

Code :

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

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.

[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 !

[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.