Angular 项目的 l10n 和 i18n 的最佳实践是什么?
What is the best practice for l10n and i18n for Angular project?
我正在开发一个使用两种语言的项目:英语和法语。
我需要将内容本地化为两种语言。例如 header 中的不同内容以及英语和法语的页脚。页面上的多语言内容(页面标题、页面 body 等)也将通过管理面板进行管理。
我需要向 URL 添加语言环境。 URL 结构对于各种语言都是相同的。
例如:
- 网站.com/en/about
- 网站.com/fr/about
- 网站.com/en/contact
- 网站.com/fr/contact
Official Angular docs 建议将单独的 Angular 项目构建和部署到单独的语言文件夹中(在我的例子中:“en”和“fr”)。这将防止网站缓存资产,用户在切换到另一种语言时将不得不加载所有内容。
而且我还需要 run/start 每个语言环境在本地创建一个单独的项目。例如:
ng serve --configuration=en
ng serve --configuration=fr --port 4201
每次更新语言字符串时,我还需要 运行 CLI 命令:
ng extract-i18n --output-path src/locale
设置对我来说似乎有点复杂。当我要添加另一种语言时,它会更加复杂。
是否有 better/simpler 方法来管理具有本地化 (l10n) 和国际化 (i18n) 的多语言 Angular 项目?
我需要通过单击添加一个按钮,例如 URL 将从“/en/about/”变为“/fr/about/”,反之亦然。
对于 i18n,请查看 ngx-translate。我认为它适合你的需要。
我不知道哪个选项最适合 l10n。
Transloco 是我使用过的 Angular 的功能更丰富、记录更完备的 i18n/i10n 解决方案之一。
我不确定他们为什么从自述文件中删除功能比较,但是 here they've outlined how it stacks up against other solutions。
从你提到的内容中脱颖而出的一些事情:
语言翻译在运行时从静态 JSON 资产中延迟加载。因此,应用程序加载一次并可以即时切换语言。
- 只有一个 Angular 项目,所以缓存工作正常。
- 用户切换语言时无需重新加载。
- 新语言就像添加新的 JSON 文件一样简单。
I18nand l10n支持.
我不知道是否有内置解决方案可以让 路由 包含当前语言。但是,这当然是可行的。 Here is a Stackblitz example.
(旁白:我们的团队曾经使用 ngx-translate, but migrated to Transloco over questions about ngx-translate's future。
我正在开发一个使用两种语言的项目:英语和法语。 我需要将内容本地化为两种语言。例如 header 中的不同内容以及英语和法语的页脚。页面上的多语言内容(页面标题、页面 body 等)也将通过管理面板进行管理。
我需要向 URL 添加语言环境。 URL 结构对于各种语言都是相同的。 例如:
- 网站.com/en/about
- 网站.com/fr/about
- 网站.com/en/contact
- 网站.com/fr/contact
Official Angular docs 建议将单独的 Angular 项目构建和部署到单独的语言文件夹中(在我的例子中:“en”和“fr”)。这将防止网站缓存资产,用户在切换到另一种语言时将不得不加载所有内容。
而且我还需要 run/start 每个语言环境在本地创建一个单独的项目。例如:
ng serve --configuration=en
ng serve --configuration=fr --port 4201
每次更新语言字符串时,我还需要 运行 CLI 命令:
ng extract-i18n --output-path src/locale
设置对我来说似乎有点复杂。当我要添加另一种语言时,它会更加复杂。
是否有 better/simpler 方法来管理具有本地化 (l10n) 和国际化 (i18n) 的多语言 Angular 项目?
我需要通过单击添加一个按钮,例如 URL 将从“/en/about/”变为“/fr/about/”,反之亦然。
对于 i18n,请查看 ngx-translate。我认为它适合你的需要。 我不知道哪个选项最适合 l10n。
Transloco 是我使用过的 Angular 的功能更丰富、记录更完备的 i18n/i10n 解决方案之一。
我不确定他们为什么从自述文件中删除功能比较,但是 here they've outlined how it stacks up against other solutions。 从你提到的内容中脱颖而出的一些事情:
语言翻译在运行时从静态 JSON 资产中延迟加载。因此,应用程序加载一次并可以即时切换语言。
- 只有一个 Angular 项目,所以缓存工作正常。
- 用户切换语言时无需重新加载。
- 新语言就像添加新的 JSON 文件一样简单。
I18nand l10n支持.
我不知道是否有内置解决方案可以让 路由 包含当前语言。但是,这当然是可行的。 Here is a Stackblitz example.
(旁白:我们的团队曾经使用 ngx-translate, but migrated to Transloco over questions about ngx-translate's future。