web-dev-qa-db-de.com

Angular4: Gebietsschema für einen Benutzer

Ich möchte eine LoginForm haben und nachdem dieser Benutzer die Anwendung eingegeben hat - entweder mit deutscher oder englischer Verwendung. Soweit ich es verstehe kann ich im app.module.ts sowas einstellen 

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

Das ist jedoch beim Start und nicht wenn das LoginForm bereits angezeigt wurde: -/Gibt es eine Möglichkeit, das Gebietsschema für die gesamte App zu ändern? (Nicht nur für eine bestimmte Komponente!) - Wäre toll, wenn die Übersetzungen auch im laufenden Betrieb geändert werden könnten. Irgendwelche Tipps, wie man erreicht? Ich habe nur den oben genannten Weg gefunden, um damit umzugehen.

angularinternationalization
7
LeO

Ich folgte der Antwort aus diesem Thread und habe folgende Lösung:

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

Hinweis: Die Verwendung einer zusätzlichen Funktion verhindert den Fehler Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function !!!!

und ich erstelle die Klasse 

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;
  }
}

was ändert den LOCALE_ID on the fly :-)

12
LeO

Was Sie in app.module.ts tun, ist der richtige Weg, dies und für die gesamte App zu tun:

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

Leider glaube ich nicht, dass es möglich ist, es im laufenden Betrieb zu ändern.

1
rmnng

Wie wäre es damit?

  • lokalen Speicher verwenden, um das Gebietsschema zu speichern (z. B. 'fr')
  • laden Sie die zugehörige Übersetzungsdatei in main.ts (zB messages.fr.xlf)
  • legen Sie die LOCALE_ID in app.module.ts fest

Um das Gebietsschema zu ändern

  • legen Sie das neue Gebietsschema im lokalen Speicher fest
  • aktualisieren Sie die App

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