web-dev-qa-db-de.com

Angular2 I18n an diesem Punkt?

Wir beschlossen, es zu drehen, und wir haben ein neues Projekt mit Angular2 gestartet. So weit so gut, aber an diesem Punkt stehen wir vor einem Problem. Was ist der richtige Ansatz für Angular2 an i18n? Wir haben ein wenig recherchiert und das gefunden:

Letztes Commit ist jedoch mehr als 5 Monate alt ... Sieht nicht nach aktiver Entwicklung aus. 

Wer hat schon versucht, Winkel-Übersetzen oder Winkel-Gettext zu verwenden? Oder vielleicht ist es mit Angular2 besser, etwas JS wie i18next einzuwickeln? Jeder könnte ihre Gedanken teilen? Vielleicht hatten Sie das gleiche Problem? 

42
Adam Nowaczyk

Plunk wurde aktualisiert auf Angular 2 Final : https://plnkr.co/edit/4euRQQ . Die Dinge scheinen genauso zu funktionieren wie in RC7.

Der neue Abschnitt i18n wurde zu Angular 2 offiziellen Dokumenten hinzugefügt. Grundsätzlich wird erklärt im detail was oben im plunkr passiert.

XLIFF ist das einzige Format für Übersetzungen, keine json Unterstützung. Eine Übersetzungsquelldatei (xliff, xlf) sollte mit ng-xi18n erstellt werden:

package.json :

"scripts": {
  "i18n": "ng-xi18n", 
  ...
}

und

npm run i18n

Weitere Informationen zum Zusammenführen einer Übersetzung in eine Komponentenvorlage finden Sie im Abschnitt Übersetzung zusammenführen . Dies geschieht mit dem SystemJS Text Plug-In.

Ein weiteres Beispiel mit Gulp http://www.savethecode.com/angular2-i18n-native-support/

Ältere Mitarbeiter : Update basierend auf RC7 und Links bereitgestellt von Herman Fransen:

Ich habe ein minimales Plunkr-Beispiel gemacht: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM

Kommentare zu plunkr:

  • bootstrap sollte TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID mit Werten versehen -> Setup-Übersetzungen
  • übersetzbare Elemente in HTML-Vorlagen sollten die Direktive i18n verwenden
  • übersetzungen werden in der Datei .xlf gespeichert. Verbindungen zwischen Sprachen werden durch Id hergestellt, Verbindungen mit html durch den Wert <source> In xlf
  • derzeit werden xlf Dateien nicht direkt verwendet. Eine .ts - Datei wird manuell erstellt, um den Inhalt von xlf in eine exportierbare Variable zu packen. Ich denke, dies sollte in der endgültigen Version automatisch funktionieren (vielleicht sogar jetzt).

Dies ist der erste offiziell dokumentierte Ansatz, den ich gefunden habe. Es ist jedoch immer noch kaum verwendbar. Ich sehe die folgenden Probleme in der aktuellen Implementierung:

  • Die Sprache ist auf bootstrap eingestellt und kann zur Laufzeit nicht geändert werden. Dies sollte in Final geändert werden.
  • Die ID eines übersetzbaren Elements in xlf wird SHA generiert. Der derzeitige Weg, diese ID zu erhalten, ist etwas unübersichtlich: Sie erstellen ein neues übersetzbares Element, verwenden es, kopieren die ID SHA= id aus einem Fehler und fügen sie in Ihre i18n.lang.xlf - Datei ein.

Es gibt eine große Dokumentation Pull Request zu i18n

Ältere Mitarbeiter : Release Notes https://github.com/angular/angular/blob/master/CHANGELOG.md haben ein Rekord

i18n : Zusammenführen von Übersetzungen 7a8ef1e

Ein großer Teil von i18n wurde in Angular 2 RC5 eingeführt.

Leider ist noch keine Dokumentation vorhanden.

19

Alle sind auf die offizielle Implementierung gespannt, aber diese funktionierte für meinen Anwendungsfall: https://github.com/ocombe/ng2-translate

README ist ziemlich gründlich, und wenn Sie etwas Besonderes benötigen (für mich war das Aufteilen von Code), ist der Code selbst nicht zu lang oder schwer zu lesen.

16
Samjones

Der Support für i18n ist jetzt in Angular 2 RC6 offiziell 

Offizieller Veröffentlichungsblog:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

Ein Beispiel für die Internationalisierung mit Angular 2 RC6
https://github.com/StephenFluin/i18n-sample

Weitere Informationen, wie das neue Konzept von i18n in angle2 funktioniert:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

8
Herman Fransen

Ich habe einen anderen Weg gefunden, dies mit pipe und service zu implementieren. 

HTML

<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>

TypeScript

...

// "this.translate" is our translate service
this.translate.use('es'); // use spanish

...

// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); 

...

https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1https://scotch.io/tutorials/simple-language-translation- in-angle-2-part-2

3
vinboxx

Es gibt eine offizielle Unterstützung für i18n in Angular.io hier:

https://angular.io/docs/ts/latest/cookbook/i18n.html

Aber! Wie in Dokumenten erwähnt:

Sie müssen eine separate Version der Anwendung für .__ erstellen und bereitstellen. jede unterstützte Sprache!

Das macht dieses Feature in den meisten Fällen unbrauchbar ...

Es sei denn, Sie verwenden es ohne CLI wie hier beschrieben: 

https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

3
trojan

Ich stelle ein POC zusammen und die offizielle Dokumentation ist mühsam, um es gelinde auszudrücken, also versuchte ich es mit ngx-translate http://www.ngx-translate.com/ und ich hatte buchstäblich die Hallo-Welt, die in ein paar arbeitet Minuten gibt es wenige Vorbehalte:

  1. Ich habe von Leuten gelesen, die sich wegen der Pfeifen über Leistung beschwert haben, aber beim Lesen der Github-Probleme scheint es, dass sie gelöst werden
  2. Nur für i18n oder Translations befasst es sich nicht mit i10n oder Localization
  3. Bei Angular4 gibt es wenige Warnfehler, aber es funktioniert trotzdem

lange geschichte kurz Ich mochte ngx-translate, wenn Sie eine kleine App haben und nur eine Übersetzung benötigen

Ich persönlich wollte Lokalisierung, also schaue ich nach https://github.com/robisim74/angular-l10n . Es sieht ziemlich gut aus, aber ich habe es nicht getestet, also werde ich es tun Lass es dich später wissen, oder du kannst gehen und wir alle versuchen es 

0