网站友情链接模块介绍,网站推广服务网址,wordpress 目录404,网页制作与网站建设策划书案例文章目录 目标过程运行参考 目标
实现简单的angular国际化。本博客实现中文版和法语版。
将Hello i18n!变为中文版#xff1a;你好 i18n!或法语版:Bonjour l’i18n !。 过程
创建一个项目#xff1a;
ng new i18nDemo在集成终端中打开。
添加本地化包#xff1a;
ng a… 文章目录 目标过程运行参考 目标
实现简单的angular国际化。本博客实现中文版和法语版。
将Hello i18n!变为中文版你好 i18n!或法语版:Bonjour l’i18n !。 过程
创建一个项目
ng new i18nDemo在集成终端中打开。
添加本地化包
ng add angular/localize在html中添加格式化标识
h1 i18nHello i18n!/h1现在运行一下页面是 生成翻译模板语言包
ng extract-i18n --output-path src/locale生成了一个文件夹locale里面有一个文件messages.xlf
会把source里的内容翻译成target 我们这里想有两种语言法文和中文。因此 为什么中文是zh-CN法文是fr-FR看这里https://angular.cn/guide/i18n-common-locale-id !-- messages.zh.xlf --
?xml version1.0 encodingUTF-8 ?
xliff version1.2 xmlnsurn:oasis:names:tc:xliff:document:1.2file source-languagezh-CN datatypeplaintext originalng2.templatebodytrans-unit id4150330030790364157 datatypehtmlsourceHello i18n!/sourcetarget中文版你好 i18n!/targetcontext-group purposelocationcontext context-typesourcefilesrc/app/app.component.html/contextcontext context-typelinenumber1/context/context-group/trans-unit/body/file
/xliff!-- messages.fr.xlf --
?xml version1.0 encodingUTF-8 ?
xliff version1.2 xmlnsurn:oasis:names:tc:xliff:document:1.2file source-languagefr-FR datatypeplaintext originalng2.templatebodytrans-unit id4150330030790364157 datatypehtmlsourceHello i18n!/sourcetarget法语版:Bonjour li18n !/targetcontext-group purposelocationcontext context-typesourcefilesrc/app/app.component.html/contextcontext context-typelinenumber1/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 --configurationfr中文版
ng serve --configurationzh跟前面的xml文件一致。
ps后面的生产构建ng build --configurationproduction,fr报错了不知道怎么搞等会了再来补充。
参考
Angular 国际化
超详细的 Angular 国际化方案 - 掘金 (juejin.cn)
Angular使用内置i18n国际化配置Angular国际化_angular i18n-CSDN博客
angular 国际化 (i18n) - 简书 (jianshu.com)
Angular8升级至Angular13遇到的问题_package ‘angular/core’ is not a dependency.-CSDN博客
心得新手入门纯看官方文档感觉太抽象太难了就结合其他博客进行理解。然后发现其他博客的一些配置已经被废弃了然后又去看官方文档。这个过程中过滤掉很多看不懂的…信息又总结了很多能看懂优质博客慢慢就学会了感谢所有写博客的人救我一命。。
