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

问题描述

我对 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>

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

谢谢

解决方法

要标记要翻译的属性，请添加 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。

理想情况下，我们使用翻译服务的方式类似于 {{ 'Key' | translate }} 并且只需将其从父组件传递到子组件，您可以按如下所示进行操作

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

angular angular-i18n internationalization