Artikelverzeichnis
Ziel
Implementieren Sie eine einfache Winkelinternationalisierung. Dieser Blog implementiert chinesische und französische Versionen.
AllgemeinHello i18n!变为Chinesische Version: 你好 i18n!OderRechtliche Version: Bonjour l'i18n !.
Verfahren
Erstellen Sie ein Projekt:
ng new i18nDemo
Im integrierten Terminal öffnen.
Lokalisierungspaket hinzufügen:
ng add @angular/localize
Formatierungs-Tags in HTML hinzufügen:
<h1 i18n>Hello i18n!</h1>
Führen Sie es nun aus. Die Seite lautet:
Generieren Sie ein Sprachpaket für die Übersetzungsvorlage:
ng extract-i18n --output-path src/locale
Ordner erstellt:locale, mit einer Datei darinmessages.xlf
Übersetzt den Inhalt aus der Quelle in das Ziel:
Wir wollen hier zwei Sprachen haben, Französisch und Chinesisch. daher:
Warum Chinesisch zh-CN und Französisch fr-FR ist, erfahren Sie hier:https://angular.cn/guide/i18n-common-locale-id
<!-- messages.zh.xlf -->
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="zh-CN" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4150330030790364157" datatype="html">
<source>Hello i18n!</source>
<target>中文版：你好 i18n!</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">1</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
<!-- messages.fr.xlf -->
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="fr-FR" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4150330030790364157" datatype="html">
<source>Hello i18n!</source>
<target>法语版:Bonjour l'i18n !</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">1</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
Verwandte Dokumente:https://angular.cn/guide/i18n-common-translation-files
Als nächstes folgt die Konfiguration angular.json (laut Dokumentation).
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf"
},
"zh": {
"translation": "src/locale/messages.zh.xlf"
}
}
},
"localize": true,
Die Konfiguration ist abgeschlossen. Nächster Build über die Befehlszeile:
ng build --localize
Dann konfigurieren Sie:
"build"->"configurations"：
"fr": {
"localize": [
"fr"
]
},
"zh": {
"localize": [
"zh"
]
}
"serve"->"configurations"：
"fr": {
"browserTarget": "i18nDemo:build:development,fr"
},
"zh": {
"browserTarget": "i18nDemo:build:development,zh"
}
laufen
Französische Version:
ng serve --configuration=fr
Chinesische Version:
ng serve --configuration=zh
Identisch mit der vorherigen XML-Datei.
ps: Der folgende Produktions-Buildng build --configuration=production,fr hat einen Fehler gemeldet. Ich weiß nicht, was ich tun soll. Ich werde später weitere hinzufügen.
Internationalisierung in TS
Referenz:
angular6 Verwenden der Nachrichtenaufforderungsbox toast_angular4 Nachrichtenaufforderungsbox-CSDN-Blog
ngx-toastr – npm (npmjs.com)
https://angular.cn/guide/i18n-common-prepare
Grammatik:
Im Komponentencode sind Übersetzungsquelltext und Metadaten von Backtick-Zeichen (`) umgeben. Markieren Sie Zeichenfolgen zur Übersetzung in Ihrem Code, indem Sie mit $localize markierte Nachrichtenzeichenfolgen verwenden.
$localize `string_to_translate`;
Referenz
Super detaillierte Angular-Internationalisierungslösung – Nuggets (juejin.cn)
Winkelinternationalisierung (i18n) - Jianshu (jianshu.com)
Erfahrung: Für Neulinge fühlt es sich zu abstrakt und schwierig an, die offiziellen Dokumente allein zu lesen. Deshalb habe ich sie mit anderen Blogs kombiniert, um sie zu verstehen. Dann stellte ich fest, dass einige Konfigurationen anderer Blogs aufgegeben wurden, und ging dann zur offiziellen Dokumentation. Dabei habe ich viele Informationen herausgefiltert, die ich nicht verstehen konnte (…) und viele hochwertige Blogs zusammengefasst, die ich verstehen konnte (!). Ich habe es langsam gelernt! Vielen Dank an alle, die gebloggt und mir das Leben gerettet haben. .