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