2017-10-24 5 views
0

In einer vorhandenen eckigen Anwendung haben wir einen Gebietsschemadienst verwendet, der ein Gebietsschema basierend auf einem ausgewählten Dropdown-Wert festlegt. Dieser Gebietsschemadienst stammt aus der angular-l10n-Bibliothek.Gebietsschema für Kendo-Ui-Daeicker-Komponente dynamisch festlegen

Vor kurzem Kendo-UI für eckig gekauft wurde. Wir glaubten, dass wir den Datepicker und andere Internationalisierung bis zu diesem Sprachdropdown (oder sogar dem Local-Service l10n) einbinden könnten. Bisher habe ich noch nicht gefunden, den Dienst oder das Drop-down zu haken oder zu abonnieren.

Ich weiß nicht wirklich wo sonst zu suchen.

Kendo-UI-Dokumentation erreicht dies, indem Sie LD_Locale von @ angular/core setzen, aber von dem, was ich gelesen habe, ist dies ein const und kann nicht nach init aktualisiert werden.

Irgendwelche Ideen oder Hilfe, wie man Kendo zur Internationalisierung von Datumsformaten auf Basis eines Drop-downs bekommt?

+1

Werfen Sie einen Blick auf den 'CldrIntlService', Sie können diese Klasse erweitern und Ihre eigene Implementierung injizieren ([Dokumentation] (https://www.telerik.com/kendo-angular-ui/components/internationalization/services/#) toc-customizing-the-default-service)). Wir verwenden diesen Ansatz, um das angezeigte Gebietsschema zur Laufzeit zu wechseln. – Philipp

Antwort

2

Tatsächlich hängen die Kendo-Komponenten für Angular vom LOCALE_ID Injektionstoken ab, um zu bestimmen, welche Kultureinstellung gewählt wird. Aufgrund des statischen Verhaltens von Angular DI kann dieses Token nach dem Bootstrap nicht aktualisiert werden und Sie benötigen für jede Kultur ein eigenes Modul. Das Modul wird bestimmten Anbieter für die locale_ID definieren:

providers: [{ provide: LOCALE_ID, useValue: 'de' }] 

Hier ist eine Demo, die diesen Ansatz verwendet: http://plnkr.co/edit/tBWDLziqXRrslupopojY?p=info

Die andere Möglichkeit (als Philipp in seinem Kommentar erwähnt) ist kundenspezifische Implementierung der IntlService zu verwenden Klasse, die nicht von dem Token LOCALE_ID abhängt. Dokumentation Link finden Sie unten:

https://www.telerik.com/kendo-angular-ui/components/internationalization/services/#toc-customizing-the-default-service

Die dritte Option, die in Kürze verfügbar sein wird, ist die Kultur auf Komponentenebene zu definieren (noch geprüft, ob es sich um eine Dienstleistung oder eine Eingabeeigenschaft sein wird). Weitere Details finden Sie in dieser Ausgabe Github zu finden:

https://github.com/telerik/kendo-angular/issues/1009

Um es zusammenzufassen, obwohl LOCALE_ID Token nicht dynamisch verändert werden kann, kann die Kultur dynamisch mit einem der oben genannten Ansätze aktualisiert werden.

+0

Die zweite Möglichkeit versuchen: Ich folgte der Dokumentation und gab den Kendo-Plunk ab. Es funktionierte ursprünglich, aber als ich versuchte, den Datepicker und das Sprachdropdown zu ihren eigenen Modulen auszubrechen, hörte es auf zu arbeiten. Siehe dieses Plunk (http://plnkr.co/edit/9mOcpq?p=preview). Solange die Sprach- und Datumsauswahl-Komponente im selben Modul war, funktionierte es gut. –

+1

Ich habe es funktioniert in einem Plunkr (http://plnkr.co/edit/BTF3HvJJgFWrm2rbqCjB?p=preview), aber wenn ich versuche, und dies lokal zu implementieren bekomme ich eine TS Fehlermeldung "Eigenschaft 'localeId' existiert nicht auf Typ ' IntlService '". Irgendwelche Ideen? –

+0

Großartig! Ihr letzter Ansatz funktioniert, wenn es nur einen Root-Provider für IntlService gibt (was in den meisten Fällen in Ordnung ist). In Bezug auf den TS-Fehler hat IntlService keine 'localeId' -Eigenschaft. Sie müssen 'this.intl' in' CldrIntlService' oder 'any' (unsichere) umwandeln' '( this.intl) .localeId = ...' –

Verwandte Themen