web-dev-qa-db-fra.com

Angular4: paramètres régionaux pour un utilisateur

Je veux avoir un LoginForm et après que cet utilisateur entre l'application - avec une utilisation en allemand ou en anglais. Autant que je sache, je peux définir dans le app.module.ts quelque chose comme 

import { LOCALE_ID } from '@angular/core';
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' },...]

Mais c'est au démarrage et pas quand le LoginForm était déjà affiché: -/Y a-t-il un moyen de changer les paramètres régionaux pour l'ensemble de l'application? (Pas seulement pour un composant spécifique!) - Ce serait formidable si les traductions pouvaient également être modifiées à la volée. Des allusions comment faire? J'ai seulement trouvé le moyen ci-dessus de traiter.

angularinternationalization
7
LeO

J'ai suivi la réponse de ce fil de discussion et j'ai la solution suivante:

import { LOCALE_ID } from '@angular/core';

@NgModule({
  // ...
  providers: [...
     {provide: LOCALE_ID,
      deps: [SettingsService],      // some service handling global settings
      useFactory: getLanguage  // returns locale string
    }
  ]
  // ...
})
export class AppModule { }
// the following function is required (for Angular 4.1.1!!!)
export function getLanguage(settingsService: SettingsService) {
  return settingsService.getLanguage();
}

Note: L'utilisation d'une fonction supplémentaire empêche l'erreur Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function !!!!

et je crée la classe 

import { Injectable } from '@angular/core';

@Injectable()
export class SettingsService {
  currentLang: string;

  constructor() {
    this.currentLang = 'en';
  }

  setLanguage(lang: string) {
    this.currentLang = lang;
  }
  getLanguage() {
    return this.currentLang;
  }
}

qui change le LOCALE_ID à la volée :-)

12
LeO

Ce que vous faites dans app.module.ts est la bonne façon de le faire et pour toute l'application:

@NgModule({
  // ...
  providers: [
    { provide: LOCALE_ID, useValue: 'de-DE'}
  ]
  // ...
})
export class AppModule { }

Mais malheureusement, je ne pense pas qu'il soit possible de le changer à la volée.

1
rmnng

Que dis-tu de ça?

  • utiliser le stockage local pour stocker les paramètres régionaux (par exemple, 'fr')
  • charger le fichier de traduction associé dans main.ts (par exemple, messages.fr.xlf)
  • définir le LOCALE_ID dans app.module.ts

Pour changer les paramètres régionaux

  • définir les nouveaux paramètres régionaux dans le stockage local
  • rafraîchir l'application

main.ts

declare const require;

const locale = localStorage.getItem('locale');
const translation = require(`raw-loader!./locale/messages.${locale}.xlf`)

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    {provide: TRANSLATIONS, useValue: translation},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
  ]
});

app.module.ts

@NgModule({
  providers: [
    {provide: LOCALE_ID, useValue: localStorage.getItem('locale')}
  ]
})
export class AppModule { }
0
yohosuff