如何将 i18n 数据作为参数传递给组件

Question

我对 i18n 的经验不多，我一直坚持这个。我在另一个组件中有一个组件。我想要做的就是将 i18n 作为参数之一传递。我该怎么做？

这是我的：

组件 A（父级）

<card content="My text that needs to be transliterated" buttonLabel="Send"></card>

组件 B（卡片 - 儿童）

@Input('content') content: string;
@Input('buttonLabel') buttonLabel: string;

通常情况下，我会<p i18n="meaning|description@@id">content to be translated</p>

在这种情况下我该怎么做？

谢谢

Answer 1

理想情况下，我们使用翻译服务的方式就像 {{ 'Key' | translate }} 一样，只需将它从父组件传递到子组件，您就可以按如下所示进行操作，它会起作用

<card [content]="'YOUR_TRANSLATION_CONTENT_KEY' | translate"  
      [buttonLabel]="'YOUR_TRANSLATION_BUTTON_KEY' | translate">
</card>

Answer 2

要标记要翻译的属性，请添加 i18n-attribute，其中 attribute 是要翻译的属性。就像你的情况 i18n-content 和 i18n-buttonLabel:

<card 
  i18n-content 
  content="My text that needs to be transliterated"
  i18n-buttonLabel="@@buttonLabelTranslation"
  buttonLabel="Send">
</card>

您还可以使用 i18n-attribute="<meaning>|<description>@@<id>" 语法指定含义、描述和自定义 ID。

如何将 i18n 数据作为参数传递给组件

How to pass i18n data to a component as parameter

angular

internationalization

angular-i18n