Использование компонента в качестве параметра для ключа ngx-translate

Question

Я использую ngx-translate в моем проекте.Я хочу использовать компонент Angular Material (mat-form-field) как часть значения перевода.Пример:

Ключ: NumberChoice

Значение: Choose a number: {{choice}}.

Использование в HTML:

    <span>{{ 'NumberChoice' | translate: {choice: this.choiceSelectorComponent} }}</span>

choiceSelectorComponent - это упомянутое поле mat-form-field.

Я попытался поместить код для поля mat-form-field в новый ngкомпонента и определил для него метод получения в соответствующем файле .ts.

Я также попытался получить его в виде HTML-тега, например:

 get choiceSelectorComponent() {
    return document.createElement('page-size-selector').outerHTML;
    }

Из-за чего тег был только частью перевода:

Выберите номер:.

Другими словами, как можно динамически включать элементы управления пользовательским интерфейсом в переведенное значение, используя их в качестве параметров для передачи ngx-translate.

Answer 1

В соответствии с ngx-translate документацией , вы должны сделать следующее.

В вашем HTML-шаблоне:

<span>{{ 'NumberChoice' | translate:choice} }}</span>

И в вашем файле компонента вы определяете param:

param = this.choiceSelectorComponent() // Or whatever value you want

Это позволит трубе правильно определить значение параметров.

Надеюсь, это поможет.