Как передать ключ i18n от родительского к дочернему компоненту до начала перевода? - PullRequest
Новая
       47

Как передать ключ i18n от родительского к дочернему компоненту до начала перевода?

0 голосов
/ 19 октября 2018

Я использую компонент поля ввода, который я могу встраивать в разные родительские компоненты с помощью форм.

В дочернем компоненте ввода у меня есть ключ перевода 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>

Проблема заключается в том, что при запуске приложения перевод происходит до того, как ключ передается в переменную в дочернем компоненте, и, следовательно, нет перевода для ключа / id: @@LabelSecondName.

Итак, labelText сохраняет исходный язык.Вместо перевода я получаю вид цифр, которые генерируются случайным образом, и поскольку эти цифры в качестве ключа не существуют в файле XLF (версия 2.0), текст / метка не переводятся.

Сообщение об ошибке: Missing translation for message "8901569964118207331"

Такое поведение ожидается, поскольку переменная: labelTextKey не получает значение: @@LabelSecondName передано правильнововремя.

Искал, но не смог найти правильного решения для этого.Этот вопрос , кажется, ближе к моему, но не совсем в том же случае, и ответа также нет.

1 Ответ

0 голосов
/ 24 октября 2018

Исправлена ​​ошибка.Решение:

Нет необходимости в теге 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>
...