記事ディレクトリ
目標
単純な角度の国際化を実装します。このブログでは中国語版とフランス語版を実装しています。
将Hello i18n!变为中文版：你好 i18n!或法语版:Bonjour l’i18n !。
プロセス
プロジェクトを作成します。
ng new i18nDemo
統合ターミナルで開きます。
ローカリゼーション パッケージを追加します。
ng add @angular/localize
HTML に書式設定タグを追加します。
<h1 i18n>Hello i18n!</h1>
これを実行すると、ページは次のようになります。
翻訳テンプレート言語パックを生成します。
ng extract-i18n --output-path src/locale
フォルダを生成しました:locale、その中にファイルがありますmessages.xlf
ソースのコンテンツをターゲットに変換します。
ここではフランス語と中国語の 2 つの言語を使用したいと考えています。したがって：
中国語が zh-CN で、フランス語が fr-FR である理由については、こちらをご覧ください: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>
関連ドキュメント:https://angular.cn/guide/i18n-common-translation-files
次は設定ですangular.json (ドキュメントによる)。
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf"
},
"zh": {
"translation": "src/locale/messages.zh.xlf"
}
}
},
"localize": true,
設定が完了しました。次にコマンドラインからビルドします。
ng build --localize
次に、次のように設定します。
"build"->"configurations"：
"fr": {
"localize": [
"fr"
]
},
"zh": {
"localize": [
"zh"
]
}
"serve"->"configurations"：
"fr": {
"browserTarget": "i18nDemo:build:development,fr"
},
"zh": {
"browserTarget": "i18nDemo:build:development,zh"
}
走る
フランス語版：
ng serve --configuration=fr
中国バージョン：
ng serve --configuration=zh
前の XML ファイルと同じです。
追記: 次の製品ビルドng build --configuration=production,fr でエラーが報告されました。どうすればよいかわかりません。後でさらに追加します。
TS における国際化
参考:
angular6 メッセージ プロンプト ボックスの使用トースト_angular4 メッセージ プロンプト ボックス - CSDN ブログ
ngx-toastr - npm (npmjs.com)
https://angular.cn/guide/i18n-common-prepare
文法：
コンポーネントコードでは、翻訳元のテキストとメタデータはバッククォート (`) 文字で囲まれます。 $localize タグ付きメッセージ文字列を使用して、コード内で翻訳対象の文字列をマークします。
$localize `string_to_translate`;
参考
超詳細な Angular 国際化ソリューション - Nuggets (juejin.cn)
Angular は組み込みの i18n 国際化を使用して Angular internationalization_angular i18n-CSDN ブログを構成します
角度の国際化 (i18n) - Jianshu (jianshu.com)
Angular8 を Angular13_package にアップグレードするときに発生する問題 「@angular/core」 は依存関係ではありません。 - CSDN ブログ
angular6 はメッセージ プロンプト ボックスを使用します toast_angular4 メッセージ プロンプト ボックス - CSDN ブログ
経験：初心者にとっては公式ドキュメントだけを読むのは抽象的すぎて難しく感じるので、他のブログと組み合わせて理解するようにしました。その後、他のブログのいくつかの設定が放棄されていることがわかり、公式ドキュメントにアクセスしました。その過程で、理解できない情報をたくさん取り除いて（…）、理解できる質の高いブログをたくさんまとめて（！）、少しずつ覚えていきました！ブログを書いて私の命を救ってくれた皆さんに感謝します。 。