Angular 5 Rohre und dynamische locale

Question

ich derzeit Anwendungen in Winkel 4 aufgebaut haben und möchte Winkel 5. Upgrade ich las, wie sie locale in ihre Pfeifen handhaben und es scheint, wie Upgrade ist nicht länger eine Option. Von dem, was ich kann sie Ihnen sagen, erwarten entweder 1. importieren manuell eine andere Kultur 2. Build eine separate App für jede Kultur

Das Problem ist, dass ich für ein internationales Unternehmen arbeiten, die 351 verschiedene Kulturen unterstützt, und wir haben 15 Apps. Sagt das eckige Team wirklich, dass ich jetzt 5265 verschiedene Anwendungen erstellen muss, wenn ich weiter upgraden möchte? Wenn ich damit zu meinem Chef gehen würde, würde ich wahrscheinlich aus dem Zimmer geworfen werden.

In unserer AngularJS apps wir gerade heruntergeladen, den Service $ locale wir zur Laufzeit benötigt, wenn der Benutzer angemeldet und die Anbieter zu, dass festgelegt. Gibt es für Angular nichts dergleichen? Wenn nicht, bin ich nicht sicher, wie eine App auf Unternehmensebene diese Sprache jemals verwenden könnte, wenn die Entwickler nicht das Glück hätten, nur eine Kultur zu unterstützen.

Answer 1

Ich hatte das gleiche Problem mit angular4 Ich wollte AOT mit mehreren Sprachen verwenden. Das ist, was ich tat:

einfachen Wrapper um ein Rohr das Gebietsschema einzustellen.

@Pipe({name: 'datepipe', pure: true}) 
export class MyDatePipe extends DatePipe implements PipeTransform { 
    constructor(private win: WindowRef) { 
    super(win.ln); 
    } 

    transform(value: any, pattern?: string): string | null { 
    return super.transform(value, pattern); 
    } 
} 

Service für locale:

function _window(): any { 
    // return the global native browser window object 
    return window; 
} 

@Injectable() 
export class WindowRef { 
    get nativeWindow(): any { 
    return _window(); 
    } 

    //default locale 
    public ln = 'en'; 


    constructor() { 
    try { 
     if (!isNullOrUndefined(this.nativeWindow.navigator.language) && this.nativeWindow.navigator.language !== '') { 
     this.ln = this.nativeWindow.navigator.language; 
     } 
    }finally {} 
    } 
} 

Dieser arbeitete für angular4 aber mit angular5 hatte ich die unterstützten Sprachen in meinem main.ts

import { registerLocaleData } from '@angular/common'; 
import localeFr from '@angular/common/locales/fr'; 

registerLocaleData(localeFr); 

Answer 2

Nach Kommunikation auf Github importieren zu Dieses Problem eine Idee gegeben, die begonnen haben, ist die Erstellung eines Dienstes, den ich in APP_INITIALIZER aufrufen, die Sie unten sehen können. Wegen der dynamischen Zeichenkette zur Erstellungszeit erstellt der angular-cli einen Chunk für jede Kultur und lädt dann zur Laufzeit den richtigen String, sobald ich die Kulturfolge, die ich von einem Serviceanruf erhalten habe, zur Verfügung stelle.

Answer 3

Ich war mit dem gleichen Problem konfrontiert, und fand eine Abhilfe.

habe ich beschlossen, Winkel locales Daten zu veröffentlichen im Rahmen eines Asset-Ordner (von CLDR kommt). Cldr-Daten stammen aus node_mopdules \ @angular \ common \ locales (was Sie in Typoskript importiert hätten). Kurz vor dem Bootstrap, mit APP_INITIALIZER, lade ich die aktuellen Kulturdaten aus Assets mit einer bestimmten locale_id.

Der Trick ist, mit dem import Schlüsselwort zu vermeiden, da dynamische Einfuhren nicht in EC2015 unterstützen. Um die Kultur Daten aus der js-Datei zu erhalten, ich schrieb diesen 'schmutzigen' Code:

import { Injectable, Inject, LOCALE_ID } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

@Injectable() 
export class LoaderService { 

    constructor(protected httpClient: HttpClient, 
       @Inject(LOCALE_ID) protected locale: string) { } 

private async loadAngularCulture(locale) { 
     let angularLocaleText = await this.httpClient.get(`assets/angular-locales/${locale}.js`).toPromise(); 

     // extracting the part of the js code before the data, 
     // and i didn't need the plural so i just replace plural by null. 
     const startPos = angularLocaleText.indexOf('export default '); 
     angularLocaleText = 'return ' + angularLocaleText.substring(startPos + 15).replace('plural', null); 

     // The trick is here : to read cldr data, i use a function 
     const f = new Function(angularLocaleText); 
     const angularLocale = f(); 

     // console.log(angularLocale); 

     // And now, just registrer the object you just created with the function 
     registerLocaleData(angularLocale); 
    } 

Und ist mein mainModule, die APP_INITIALIZER mit:

export function configFactory(intlLoader: SfkIntlLoaderService) { 
    return intlLoader.initializer(); 
} 

export function localFunction() { 
    // the rule to get you language according. 
    // Here, for demo, i just read it from localstorage 
    return localStorage.getItem('LANGUGAGE'); 
} 

@NgModule({ 
declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule 
) 
    ], 
    providers: [ 
    LoaderService, 
    { 
     provide: LOCALE_ID, 
     deps: [], 
     useFactory: localFunction 
    }, 
    { 
     provide: APP_INITIALIZER, 
     useFactory: configFactory, 
     deps: [LoaderService], 
     multi: true 
    } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Hope this helfen!