Angular4: Lokalizacja dla użytkownika

Question

Chcę mieć LoginForm i po tym, jak ten użytkownik wchodzi do aplikacji - z użyciem języka niemieckiego lub angielskiego. O ile rozumiem, mogę ustawić w app.module.ts coś podobnego

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

Ale to przy starcie, a nie wtedy, gdy LoginForm został już wyświetlony: -/Czy istnieje sposób, aby zmienić ustawienia regionalne dla całej aplikacji? (Nie tylko dla konkretnego komponentu!) - Byłoby świetnie, gdyby tłumaczenia można było zmieniać również w locie. Wszelkie wskazówki, jak osiągnąć? Znalazłem tylko powyższy sposób postępowania.

Answer 1

Co robisz w app.module.ts jest właściwym sposobem, aby to zrobić, i dla całej aplikacji:

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

Ale niestety nie sądzę, że jest możliwe, aby zmienić go na latać.

Answer 2

I po odpowiedzi od this thread i mam następujące rozwiązanie:

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

Uwaga: Korzystanie z dodatkową funkcją zapobiega błąd Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function !!!!

i tworzę klasę

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

który zmienia LOCALE_ID w locie :-)

Answer 3

Jak na ten temat?

• wykorzystanie lokalnej pamięci do przechowywania ustawień regionalnych (np. 'Fr')
• obciążenie skojarzony plik tłumaczenie w main.ts (np. Messages.fr.xlf)
• ustawić LOCALE_ID w aplikacji. module.ts

Aby zmienić ustawienia regionalne

• ustawić nowe lokum w pamięci lokalnej
• odświeżania aplikacja

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