时间戳

首页 > 解决方案 > 如何将 i18n 与作为 Angular 对象的组件输入一起使用？

angular - 如何将 i18n 与作为 Angular 对象的组件输入一起使用？

问题描述

有一种情况是在子组件上定义输入，如下所示：

interface MyValues {
   text: string;
   path: string;
   someOtherValue: string;
}

@Input() myValues: MyValues;

我需要myValues通过如下输入从父组件传递给子组件：

<my-child-component [myValues]="myValues" />

由于它不是简单的数据类型输入，因此我不能使用 Angular 文档中推荐的 i18n 属性样式。这是一个具有多个值的对象，因此在传递给子组件时无法对其进行翻译（除非我遗漏了某些内容）。

在子组件中，有一些代码如下：

<span *ngFor="let myValue of myValues">
   <a>{{myValue.Text}}</a>
</span>

通常我想做的是为需要翻译的锚分配一个 id，如下所示：

<a i18n="@@myChildComponent_text">{{myValue.Text}}</a>

这样做的问题是它会在名为的翻译文件中创建一个字段，@@myChildComponent_text以进行翻译。但是，传递给这个子组件的这个对象是动态的，其中的值是动态的myValues，因此字面翻译会根据传入的内容而有所不同。

我的问题是，在将对象传递给子组件的输入时，我如何仍然利用i18nAngular 国际化功能和自定义 ID，其中该对象将具有需要翻译的不同物理值？@@id

标签： angularinternationalizationangular-cliangular-i18n

解决方案

动态字段无法使用 angulars i18n 进行转换。因为最终它是一个简单的文本替换发生的事情。

您向 HTML-Tags 添加一个包含简单文本的属性。该ng extract命令创建一个文件（XLIFF 1.2（默认）、XLIFF 2、XML 消息包 (XMB)），该文件可以与不同的工具（通常由翻译完成）一起使用，以创建一个新的翻译文件。您可以使用每种语言的配置扩展 angular.json，告诉 angular 应该使用哪个翻译文件。例如法语：

"configurations": {
...
"fr": {
  "aot": true,
  "outputPath": "dist/my-project-fr/",
  "i18nFile": "src/locale/messages.fr.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "fr",
  ...
}

当您现在使用ng-build --configuration=frAngular 时，会将您的静态文本替换为翻译文件中的文本。对于每种语言，都会构建一个单独的应用程序。当您部署您的应用程序时，您使用不同的 url 处理不同的语言，例如 host/my-app/fr 用于法语或 host/my-app/de 用于德语，每个都指向您的应用程序的特定翻译版本。

这种方法的缺点是您无法处理动态值，因为它仅适用于静态文本。这就是为什么您必须使用第三方库来处理这种情况。一个通用库是ngx-translate。您可以在哪里根据 json 文件解析 id。如果您想使用多个翻译文件，您还可以将ngx-translate-multi-http-loader与 ngx-translate 结合使用。

大多数情况下，您将 i18n 与 ngx-translate（或其他类似库）结合使用以获得完整的多语言支持。

编辑 05.02.2021：

ngx-translate 的未来尚不清楚，PR 将被合并，它目前是一种基本支持。更多信息：https ://github.com/ngx-translate/core/issues/783

作为替代尝试：

ngneat/transloco

推荐阅读