如何在翻译开始之前将 i18n 键从父组件传递到子组件？

Question

我正在使用一个输入字段组件，我可以使用表单将其嵌入到不同的父组件中。

在输入子组件中，我有一个 i18n 翻译键作为使用插值的变量，我想根据客户的选择从父组件动态生成它。

input.component.ts:

<div i18n="{{labelTextKey}}">{{labelText}}</div>
<div>
    <input matInput [required]="required" 
                    [name]="name"
                    [(ngModel)]="value" 
                    [type]="type">
</div>

form.component.ts:

<app-input [labelText]="'Second name'"
           [labelTextKey]="'@@LabelSecondName'"
           [name]="'secondName'"
           [ngModel] = "secondName"
           [type] = "'text'"
</app-input>

问题是，当运行应用程序时，翻译发生在密钥传递给子组件中的变量之前，因此 key/id 没有翻译：@@LabelSecondName。

因此，labelText 保留了原始语言。我得到的不是翻译，而是一种随机生成的数字，因为 XLF（2.0 版）文件中不存在作为密钥的这些数字，text/label 未翻译。

Error message: Missing translation for message "8901569964118207331"

该行为在某种程度上是预期的，因为变量：labelTextKey 没有及时获得值：@@LabelSecondName。

一直在搜索，但找不到正确的解决方案。这个question好像和我的比较接近，但不完全一样，也没有答案。

Answer 1

问题已解决。解决方案：

不需要在子组件中使用 i18n 标签，只需在父组件中这样使用即可：

<app-input i18n-labelText="@@LabelSecondName" labelText="Second name"></app-input>

所以，整个代码看起来像 .:

<app-input [labelText]="'Second name'"
       i18n-labelText="@@LabelSecondName"
       [name]="'secondName'"
       [ngModel] = "secondName"
       [type] = "'text'"
</app-input>

如何在翻译开始之前将 i18n 键从父组件传递到子组件？

How to pass i18n key from parent to child component before translation starts?

angular

internationalization

translation

angular-i18n

angular-dynamic-components