Angular 角度：多语言的本地化

我有一个Angular 6应用程序已经构建好了。现在，我们计划支持多种语言。我能够创建多个xlf文件，并用该语言替换目标字符串。我的语言环境文件有三个文件，如messages.en.xlf、messages.es.xlf和messages.fr.xlf，分别用于英语、西班牙语和法语

根据浏览器的语言，应用程序应选择所需的语言文件。如果浏览器设置为法语，它将自动拾取messages.fr.xlf并以法语显示应用程序

最初，我的build命令将是ng build-prod-output散列所有内容，但随着本地化更改，我需要使用-aot=false和-build optimizer=false，我的应用程序的性能和加载时间变得更差

ng build  --prod --output-hashing all --aot=false --build-optimizer=false

我的main.ts文件如下所示：

声明常数要求； var-userLang； addEventListener'languagechange'，函数{ //Calllanguage； location.reloadtrue； }; 函数调用语言{ userLang=navigator.language； userLang=userLang.split-[0]； 切换用户语言{ 案例“es”：{ 登记册地方目录； 打破 } 案例“fr”：{ 登记处地方登记处； 打破 } 案例“en”：{ 登记处地方登记处； 打破 } 默认值：{ userLang='en'； 登记处地方登记处； 打破 } } } Calllanguage； const translations=require`raw loader/语言环境/消息。${userLang}.xlf`； platformBrowserDynamic.bootstrapModuleAppModule{ 供应商：[ {提供：翻译，使用值：翻译}， {提供：翻译\u格式，useValue:'xlf'} ] } .catcherr=>console.logerr；

---

我想知道是否有一种基于浏览器语言加载xlf文件的正确方法，而不会出现性能问题，也不会使AOT为false

关于如何在应用程序中使用翻译，您有3个主要选项

可以使用“角度”内置功能并创建角度。然后，您需要确保在加载网页时在运行时加载正确的语言相关的生成文件。一般做法是将每个依赖于语言的构建放在自己的文件夹中，该文件夹用语言环境/语言的ISO代码命名。然后，您可以指向此文件夹，然后在页面导航中指向包含的index.html，或者在您使用的任何主机页面中加载包含的.js文件。根据您想要支持的区域设置的数量，这会导致构建时间显著增加。从积极的一面看，您可以获得AoT的所有运行时性能好处

您可以使用angular内置功能，并在运行时创建单个。发布应用程序时，您的构建时间将快得多，但客户端在加载应用程序时，可能在应用程序执行期间，会受到性能影响。积极的一面是，当您处理多种语言时，这种结构可能更容易维护，尤其是在语言数量预计将增长的情况下

外部工具类 当处理越来越多需要支持的语言时，这是我首选的方法。此外部工具允许您使用单个AoT构建。然后，在模板中定义翻译键，并配置该工具以从一些可能的外部源（如服务器或磁盘上的文件）检索翻译。可能还有其他人，但我不打算把他们包括在这个答案中

---

关于JiT与AoT的说明。已经有一个写得相当好的答案来比较JiT构建和可以在StackOverflow上找到的AoT构建：。我不会在这里重新总结这些答案。

关于如何在应用程序中使用翻译，您有3个主要选项

可以使用“角度”内置功能并创建角度。然后，您需要确保在加载网页时在运行时加载正确的语言相关的生成文件。一般做法是将每个依赖于语言的构建放在自己的文件夹中，该文件夹用语言环境/语言的ISO代码命名。然后，您可以指向此文件夹，然后在页面导航中指向包含的index.html，或者在您使用的任何主机页面中加载包含的.js文件。根据您想要支持的区域设置的数量，这会导致构建时间显著增加。从积极的一面看，您可以获得AoT的所有运行时性能好处

您可以使用angular内置功能，并在运行时创建单个。发布应用程序时，您的构建时间将快得多，但客户端在加载应用程序时，可能在应用程序执行期间，会受到性能影响。积极的一面是，当您处理多种语言时，这种结构可能更容易维护，尤其是在语言数量预计将增长的情况下

外部工具类 这是我处理wi的首选方法 需要支持的语言越来越多。此外部工具允许您使用单个AoT构建。然后，在模板中定义翻译键，并配置该工具以从一些可能的外部源（如服务器或磁盘上的文件）检索翻译。可能还有其他人，但我不打算把他们包括在这个答案中

---

关于JiT与AoT的说明。已经有一个写得相当好的答案来比较JiT构建和可以在StackOverflow上找到的AoT构建：。我不会在这里重新总结这些答案。

随着Angular 9和Ivy的出现，运行时的单版本翻译越来越接近现实。Ivy已经具备在运行时加载翻译的功能，如下所述：

还有这里：

但是，由于需要外部工具来提取字符串，因此它似乎还没有准备好生产

---

考虑到创建一种构建一种语言是多么痛苦，我很想尝试这种新方法。

使用Angular 9和Ivy，运行时的单构建翻译更接近现实。Ivy已经具备在运行时加载翻译的功能，如下所述：

还有这里：

但是，由于需要外部工具来提取字符串，因此它似乎还没有准备好生产

---

考虑到创建一种build one语言是多么痛苦，我很想尝试这种新方法。

为了提高性能，如果使用内置i18n进行翻译，通常最好为每种语言创建一个捆绑集。或者，您可以使用它动态切换语言，甚至不需要重新加载窗口。我们只需要创建一个构建包。我们不能为每种语言创建一个。我看过ngx翻译，但我想知道是否有一种角度内置的方式来实现它我想知道是否有一种合适的方式来加载基于浏览器语言的xlf文件，而不会出现性能问题，也不会使aot为false。← 您必须选择每种语言具有不同应用程序文件的aot或可以在运行时引导区域设置的jit。如果使用内置的i18n翻译，则没有混合方法。我个人更喜欢使用，尤其是当您有多个翻译或语言数量将增长时。这将允许您使用AOT进行编译，并支持文本的动态替换，即组件中的翻译。到目前为止，没有人提供答案的原因与动机无关，即添加奖励，因为您想要的解决方案不存在，所以问题不可回答。您必须在浏览器中的动态翻译加载和以JIT方式运行、每次翻译创建捆绑包并以AOT方式运行或使用类似的库之间进行选择。为了提高性能，如果您使用内置的i18n进行翻译，通常最好为每种语言创建一个捆绑包集。或者，您可以使用它动态切换语言，甚至不需要重新加载窗口。我们只需要创建一个构建包。我们不能为每种语言创建一个。我看过ngx翻译，但我想知道是否有一种角度内置的方式来实现它我想知道是否有一种合适的方式来加载基于浏览器语言的xlf文件，而不会出现性能问题，也不会使aot为false。← 您必须选择每种语言具有不同应用程序文件的aot或可以在运行时引导区域设置的jit。如果使用内置的i18n翻译，则没有混合方法。我个人更喜欢使用，尤其是当您有多个翻译或语言数量将增长时。这将允许您使用AOT进行编译，并支持文本的动态替换，即组件中的翻译。到目前为止，没有人提供答案的原因与动机无关，即添加奖励，因为您想要的解决方案不存在，所以问题不可回答。您必须在浏览器中动态翻译加载和以JIT方式运行angular、每次翻译创建捆绑包并以AOT方式运行，或者使用类似的库。或者只是等待Ivy—他们建议我们可以在运行时使用AOT动态国际化我们的应用。@ngx translate对我来说也是最可取的。它支持在运行时添加或删除，无需重新部署。我同意@khush，ngx translate是一个不错的选择。我不得不在一个项目中使用它，而且它非常容易使用。或者只是等待Ivy-他们建议我们能够在运行时使用AOT动态国际化我们的应用程序。@ngx translate对我来说也是最可取的。它支持在运行时添加或删除，无需重新部署。我同意@khush，ngx translate是一个不错的选择。我不得不在一个项目中使用它，它非常容易使用。