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

Question

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

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，该对象将在其中具有需要转换的不同物理值？

Answer 1

您应该使用ngx-translate https://github.com/ngx-translate/core。

定义翻译：导入 TranslateModule 后，您可以将翻译放入将使用 TranslateHttpLoader 导入的 json 文件中。以下翻译应存储在en.json中。

{
    "HELLO": "hello {{value}}"
}

您还可以使用setTranslation手动定义翻译。

translate.setTranslation('en', {
    HELLO: 'hello {{value}}'
});

TranslateParser理解嵌套的 JSON对象。这意味着您可以得到如下所示的翻译：

{
    "HOME": {
        "HELLO": "hello {{value}}"
    }
}

使用服务、管道或指令：您可以使用 TranslateService 、 TranslatePipe或TranslateDirective来获取翻译值。

使用该服务，它看起来像这样：

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

这是使用管道的方法：

<div>{{ 'HELLO' | translate:param }}</div>

在你的组件中定义参数如下：

param = {value: 'world'};

这是使用该指令的方式：

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

或者使用元素的内容作为键甚至更简单：

<div translate [translateParams]="{value: 'world'}">HELLO</div>