目標(biāo)
實(shí)現(xiàn)簡單的angular國際化。本博客實(shí)現(xiàn)中文版和法語版。
將Hello i18n!變?yōu)?strong>中文版：你好 i18n!或法語版:Bonjour l’i18n !。
過程
創(chuàng)建一個(gè)項(xiàng)目：
ng new i18nDemo
在集成終端中打開。
添加本地化包：
ng add @angular/localize
在html中添加格式化標(biāo)識：
<h1 i18n>Hello i18n!</h1>
現(xiàn)在運(yùn)行一下，頁面是：
生成翻譯模板語言包：
ng extract-i18n --output-path src/locale
生成了一個(gè)文件夾：locale，里面有一個(gè)文件messages.xlf
會把source里的內(nèi)容翻譯成target：
我們這里想有兩種語言，法文和中文。因此：
為什么中文是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>
相關(guān)文檔：https://angular.cn/guide/i18n-common-translation-files
接下來是配置angular.json（根據(jù)文檔）。
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf"
},
"zh": {
"translation": "src/locale/messages.zh.xlf"
}
}
},
"localize": true,
配置完了。接下來從命令行構(gòu)建：
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"
}
運(yùn)行
法語版：
ng serve --configuration=fr
中文版：
ng serve --configuration=zh
跟前面的xml文件一致。
ps：后面的生產(chǎn)構(gòu)建ng build --configuration=production,fr報(bào)錯(cuò)了，不知道怎么搞，等會了再來補(bǔ)充。
在TS中國際化
參考：
angular6 使用信息提示框toast_angular4 消息提示框-CSDN博客
ngx-toastr - npm (npmjs.com)
https://angular.cn/guide/i18n-common-prepare
語法：
在組件代碼中，翻譯源文本和元數(shù)據(jù)被反引號 （`） 字符包圍。 使用 $localize 標(biāo)記的消息字符串在代碼中標(biāo)記出要翻譯的字符串。
$localize `string_to_translate`;
參考
Angular 國際化
超詳細(xì)的 Angular 國際化方案 - 掘金 (juejin.cn)
Angular使用內(nèi)置i18n國際化配置Angular國際化_angular i18n-CSDN博客
angular 國際化 (i18n) - 簡書 (jianshu.com)
Angular8升級至Angular13遇到的問題_package ‘@angular/core’ is not a dependency.-CSDN博客
angular6 使用信息提示框toast_angular4 消息提示框-CSDN博客
ngx-toastr - npm (npmjs.com)文章來源：http://www.zghlxwxcb.cn/news/detail-720973.html
心得：新手入門，純看官方文檔感覺太抽象太難了，就結(jié)合其他博客進(jìn)行理解。然后發(fā)現(xiàn)其他博客的一些配置已經(jīng)被廢棄了，然后又去看官方文檔。這個(gè)過程中過濾掉很多看不懂的（…）信息，又總結(jié)了很多能看懂優(yōu)質(zhì)博客（?。?，慢慢就學(xué)會了！感謝所有寫博客的人，救我一命。。文章來源地址http://www.zghlxwxcb.cn/news/detail-720973.html
到了這里，關(guān)于【angular】實(shí)現(xiàn)簡單的angular國際化(i18n)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
