使用 Angular (@angular/localize) 进行运行时语言翻译是否可行?

4
4个回答

7

使用 Angular 的国际化(i18n)功能时可能会出现运行时无法解决的问题。只能使用 ngx-translate。Angular 团队仍然只是说“我们将在下一个版本中完成”,但尚未成功。我正在一个大型项目中工作,我们使用自 Angular 版本 4 或 6 开始就使用了 ngx-translate。您可以信任这个第三方库。

i18n 只能为一些 baseHref(如下所示)构建应用程序:

https://your.domain/en/...

https://your.domain/de/...

如果需要编译大量需要 i18n 的应用程序,则可以使用 ngx-translate 来处理。它只需要一个应用程序,并且可以根据需要将翻译拆分到模块中。

我的建议是使用 ngx-translate,并在 Angular 团队实现运行时语言重载后,为翻译部分重新编写项目


3
您可能已经注意到,使用Angular进行构建时,构建时间翻译始终是必需的,您需要按区域设置构建应用程序(例如,一个“en”构建和一个“fr”构建)。然后,您需要托管每个应用程序,并重定向到特定的区域设置才能在运行时切换。这不是最好的体验。
使用Angular Ivy,现在还有一个@angular/localize包,它提供了一个$localize标记模板助手,可用于运行时翻译,但它仍将使用您当前所在的区域设置。当以生产配置构建时,我认为它可能会优化掉其他语言环境,因此您仍然无法在运行时轻松切换语言。
const message = $localize`:@@username:Hello {username}`;

如果需要在运行时切换翻译,您可能需要跟踪并投票支持以下问题:

https://github.com/angular/angular/issues/38953

特别地,您可以看到来自napeipetebacondarwin的两条评论,这似乎表明Angular不会原生支持此功能。

dynamic locale switching (of course)
Indeed this will not be supported natively in Angular.

也许如果它们获得更多的投票,就会意识到对此功能的需求 :) 在那之前,您需要使用第三方库,如已经建议的ngx-translate

1

在我找到这个帖子之后,我查看了Ticket并发现了一个有趣的答案,即自Ivy以来似乎可以在运行时进行动态语言切换:

参考petebacondarwin的答案https://github.com/angular/angular/issues/38953#issuecomment-862492065

稍后会就一些问题进行讨论,但总体上应该可以实现

这是很好的反馈,谢谢@napei。我很高兴地说,内置的i18n现在实际上支持了你提到的许多点(如果没有很好的文档):

动态区域设置切换(当然) Angular不会原生支持此功能。

一个构建输出,多种语言(更快的构建时间) 自Ivy以来,这已经成为i18n的默认设置

JSON语言文件。我很难适应XLIFF并使i18n工具与之配合使用,我还混淆了与我一起工作的其他人,因为它并不一定是最美观的东西。 JSON也与外部工具集成得更好(当我开始使用它时,我选择部署weblate) 内置的i18n现在支持使用两个JSON格式进行消费和提取:一个简单的键值对格式,以及稍微复杂一些的ARB格式。

我可以从TS中获取翻译数据,这有助于处理动态按钮或其他消息。自那时起,我已经不再将字符串放入TS中,但这是我可以做的事情,所以我使用了它。 自Ivy以来,这也得到了支持,形式为用$localize标记的静态反引号字符串。

与惰性加载的路由一起惰性加载翻译。对于非运行时方法完全无关紧要,因为这都是静态内容,可能会浪费,但仍然有用,可以使惰性加载模块与Angular中的常规方式保持一致。 如果您愿意在浏览器中翻译消息而不是获得编译时翻译的好处,则现在实际上可以惰性加载翻译。这是一个文档不够完善的领域,但@alexcotelin正在为此制作示例和一些文档。

Observables。我可以订阅语言更改,查看当前语言,在NGRX等状态中执行操作。 作为无动态区域设置切换的推论,这不会得到内置支持。

不进行重定向,语言从用户帐户/本地存储中设置并首先加载,而不会重定向到特定于语言环境的网站 /en 或 /id 等。这也简化了部署(firebase),因为我无需在服务器端执行任何额外操作。它还不是 SSR 应用程序(尚未),因此我无法访问例如确定 Accept-Language 标头并在提供服务之前重定向的功能。(也许还有其他方法,但我从未费心去查找)。
作为上述在浏览器中进行翻译的能力的一部分,可以根据 URL 以外的其他内容在引导时设置区域设置,因此这也有效支持。

基于这个问题,我记录了我的经验,成功地将 @angular/localize 运行时翻译添加到我的开源 Angular 应用程序中。虽然我发现设置有些麻烦,但它运行良好。唯一使用的第三方应用程序是非常小的脚本,用于管理更新翻译文件并将其转换为 JSON。 - Bufke

1

这是可能的,但不是开箱即用的。Angular本地化具有loadTranslations函数,可以在运行时加载翻译。但它没有任何从资源文件获取翻译的功能。为了实现这一点,请使用以下第三方软件包。

https://github.com/soluling/I18N/tree/master/Library/Angular


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接