Angular 5 - 在 TypeScript 中翻译字符串

Posted 2023-03-13

【中文标题】Angular 5 - 在 TypeScript 中翻译字符串

【英文标题】：Angular 5 - Translating Strings in TypeScript

【发布时间】：2018-05-15 11:12:26

【问题描述】：

我正在使用 i18n 进行翻译，并且对它在 html 端的工作方式感到满意。

但是，如果我在我的打字稿中的字符串中定义了错误消息等，我想要一种方法来翻译这些但找不到方法。

是否有解决方法来实现这一点？

【参考方案1】：

直到现在 (@angular/language-service v7.2)，这还不能通过库的 API 实现。无论如何，您可以查看my answer under another similar question 以获得解决方法。

【讨论】：

这看起来和我要找的完全一样，应该是可以接受的答案，谢谢！

【参考方案2】：

使用 Angular 9+ 你可以做到这一点

let <local_variable> = $localize`:@@<unique_id>:<optional_text>`

Example: let err_msg = $localize`:@@err_username:Invalid username, please check your inputs`;

到目前为止，您无法使用 npm 脚本自动提取这些变量。您必须像这样手动添加它

在 messages.xlf 文件中

<trans-unit id="err_username:Invalid" datatype="html">
      <source>Invalid username, please check your inputs</source>
</trans-unit>

messages.lang.xlf 文件中（语言的翻译文件

 <trans-unit id="err_username:Invalid" datatype="html">
      <source/>
      <target>Ungültiger Benutzername, bitte überprüfen Sie Ihre Eingaben</target>
 </trans-unit>

【讨论】：

这是正确的，但请记住，这还没有得到官方支持。 xi18n 不支持在 TypeScript 中进行的翻译，在 Angular 库中这会导致问题，因为它们必须在没有 Ivy (v9) 的情况下发布

【参考方案3】：

Angular GitHub repo 上有一个悬而未决的问题。

欲了解更多信息，请查看this。不幸的是，typescript 的字符串还没有被正式支持。但是，一些开发人员提出了一些解决方法，您可以看看。

【讨论】：

最终的解决方案是使用github.com/ngx-translate - 这个库支持 Angular 7 并且还可以在 typescript 类中进行翻译，而不仅仅是在模板中进行翻译