我可以使用 Angular i18n 翻译打字稿代码中的字符串文字吗

Question

我正在使用 Angular's i18n tools 本地化我的 Angular 应用程序，它将 HTML 模板中的文本提取到 xlf 文件中，然后使用 AOT（提前编译）构建整个应用程序的本地化版本。

我的问题是：是否可以使用这个框架来提取打字稿代码中的字符串文字，所以它们被列在同一个 xlf 文件中并在本地化的 AOT 构建中被替换？

理想情况下，我想在我的打字稿代码中写下这样的内容：

foo() {
   this.bar = i18n('baz');

字符串 'baz' 将列在我发送给我的翻译的 xlf 文件中。

或者，如果这是不可能的，是否有一个库可以做类似的事情？ IE。将 typescript 代码中的字符串提取到 xlf 文件中，然后在运行时或构建期间替换它们？

Answer 1

我可以确认@JB Nizet 在他的回答中指的是现在在 Angular 9 中工作，所以这是可行的：

  foo() {
    const appTitle = $localize`:@@siteTitle:Example Title`;
    // appTitle is now translated based on locale

    titleService.setTitle(appTitle); 
  }

您可以在此处阅读更多信息https://github.com/angular/angular/blob/master/packages/localize/init/index.ts

Answer 2

目前还没有官方支持，但是 Olivier Combe，既是 ngx-translate（你可以使用）的作者，也是负责 i18n 的 Angular 团队的成员，他写了一个speculative polyfill，你可以用。

Answer 3

$localize 使用这个机制让我们写：

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`You have 10 users`;
}

请注意，您不必导入该函数。只要在应用程序中添加一次 import '@angular/localize/init'，$localize 就会被添加到全局对象中。

然后，您可以像翻译模板一样翻译消息。但是，现在 (v9.0.0)，CLI 不像模板那样使用 xi18n 命令提取这些消息。

如果您为应用程序提供服务但没有找到翻译，$localize 只会显示原始字符串，并在控制台中记录警告：

未找到“6480943972743237078”（“您有 10 个用户”）的翻译。

因此，如果您想尝试，必须手动将其添加到带有给定 ID 的 messages.fr.xlf 中：

<trans-unit id="6480943972743237078">
  <source>You have 10 users</source>
  <target>Vous avez 10 utilisateurs</target>
</trans-unit>

然后我的 HomeComponent 的模板显示 Vous avez 10 utilisateurs！

查看此链接：https://blog.ninja-squad.com/2019/12/10/angular-localize/

Answer 4

我同意 @azerafati 和他提到的在 Angular 9 和 Ivy 中新引入的方法，这在 Angular I18N 文档中也没有正确记录，因为它需要正确配备，并且它缺少的最重要的事情之一是提取Angular 还不支持。

如果您为您的应用程序运行提取命令 (xi18n)，您将从提到 i18n 属性的所有 html 文件中将提取的字符串转换为 xlf 格式文件。但它不会提取您在 .ts 文件中提到的任何内容，如上面@azerafati 所述。

如何实现？ 是的，总有办法，我找到了。让我知道这是否有帮助：

创建一个虚拟组件，它不应该是任何路由的一部分，也不应该出现在 UI 中。确保它只是将它包含在 app.module 或相应的功能模块中，以便在提取过程中可以翻译它。在 (.ts) 文件中定义所有需要翻译的字符串，并使用 $localize 方法引用这些字符串。你准备好了。

translate.component.html

<div>
  <label i18n="@@Home.RuntimeTrans">
     This is runtime translation string
  </label>
</div>

并在代码中用作

home.component.ts

  this.foo = $localize`:@@Home.RuntimeTrans:`

然后，如果您需要，您可以在任何 html 页面中使用相同的插值。