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

Question

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

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

@Input() myValues: MyValues;

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

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

因为它不是简单的数据类型输入，所以我不能使用 Angular 文档中推荐的 i18n 属性样式 here .这是一个具有多个值的对象，因此在传递给子组件时无法对其进行翻译(除非我遗漏了什么)。

在子组件中，有如下代码:

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

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

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

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

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

Answer 1

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

您向包含简单文本的 HTML 标签添加一个属性。 ng extract 命令创建一个文件(XLIFF 1.2(默认)、XLIFF 2、XML Message Bundle (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=fr时，Angular 会将您的静态文本替换为翻译文件中的文本。对于每种语言，都会构建一个单独的应用程序。当您部署您的应用程序时，您使用不同的 url 处理不同的语言，例如法语的 host/my-app/fr 或德语的 host/my-app/de，每个都指向您的应用程序的特定翻译版本。

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

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

编辑 05.02.2021:

ngx-translate 的 future 不明朗，PR 将被合并它目前是一种基本支持。更多信息在这里:https://github.com/ngx-translate/core/issues/783

作为替代尝试:

ngneat/transloco