Question

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

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

理想情况下，我想在我的打字稿代码中写出类似的东西：

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

和字符串＆＃39; baz＆＃39;将列在我发送给我的翻译的xlf文件中。

或者，如果这是不可能的，是否有一个类似的东西的库？即从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

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

Answer 3

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

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

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

创建一个虚拟组件，该虚拟组件不应成为任何路由的一部分，并且不应出现在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页面中将其用作插值。

Answer 4

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

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

请注意，您不必导入该功能。只要在应用程序中添加一次导入'@ 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/

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

4 个答案: