一、国际化之本地化你的应用

参考网址:https://angular.io/guide/i18n

- 使用Angular国际化您的应用程序:

  • 使用内置管道以本地格式显示日期,数字,百分比和货币。
  • 在组件模板中标记文本以进行翻译。
  • 标记要翻译的表达形式的复数形式。
  • 标记替代文本以进行翻译。

- 在为国际用户准备好应用程序之后,请使用Angular CLI通过执行以下任务来本地化应用程序:

  • 使用CLI将标记的文本提取到源语言文件。
  • 为每种语言制作此文件的副本,并将这些翻译文件发送给翻译人员或服务。
  • 为一个或多个语言环境构建应用时,请使用CLI合并完成的翻译文件。

- 先决条件
要准备应用程序的翻译,您应该对以下内容有基本的了解:

  • 模板
  • 组件
  • 用于管理Angular开发周期的Angular CLI命令行工具
  • 用于翻译文件的可扩展标记语言(XML)
    在这里插入图片描述

二、国际化Angular 9教程(i18n)

参考网站:https://phrase.com/blog/posts/angular-9-tutorial-on-i18n/

三、Angular实现国际化导论(i18n)

方法一:使用Angular cli实现国际化,即使用Angular自带的i18n工具。

在这里插入图片描述

1)angular项目如何配置国际化(i18n)?:https://blog.csdn.net/qq_36671474/article/details/88426933
2)Angular2 国际化 (i18n):https://blog.csdn.net/weixin_33675507/article/details/91426733
3)Angular国际化-Angular i18n多国语言:https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app
4)Angular 项目实现国际化的方法:https://www.jb51.net/article/132402.htm

方法二:使用ngx-translate实现国际化:

1)Angular 5.0 学习9:Angular i18n(国际化方案):https://segmentfault.com/a/1190000015311981#articleHeader2
2)代码:https://github.com/ngx-translate/core

方法三:使用第三方库 ngstack 实现国际化:

1)教程:https://juejin.cn/post/6844903792006135815
2)具体项目代码:https://github.com/ngstack/translate
3)@ngstack/translate文档:https://www.npmjs.com/package/@ngstack/translate

方法四:使用NG-ZORRO实现国际化:

1)NG-ZORRO(Ant Design of Angular)8.0 组件文档:https://www.bookstack.cn/read/ng.ant.design-v8.0/940ddcbe468dd0fb.md

四、实际操作出现的错误

(一)方法一:使用Angular cli实现国际化,即使用Angular自带的i18n工具。

  1. 运行ng xi18n --output-path src/translate生成翻译源文件时项目出现以下错误:
    在这里插入图片描述
    解决方案:(无法解决)在这里插入图片描述
    2.问题:需要手动写翻译文件吗?
    在这里插入图片描述
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐