3

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

在输入子组件中，我有一个 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 版）文件中不存在这些数字作为键，因此文本/标签未翻译。

错误信息：Missing translation for message "8901569964118207331"

这种行为是预期的，因为变量：labelTextKey没有得到值：@@LabelSecondName及时传递。

一直在寻找，但无法找到正确的解决方案。这个问题似乎更接近我的问题，但并不完全相同，也没有答案。

4

1 回答 1

4

问题已修复。解决方案：

子组件中不需要 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>
于 2018-10-24T10:37:09.840 回答