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.
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 :-)
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.
Que dis-tu de ça?
Pour changer les paramètres régionaux
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 { }