使用组件作为 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 文件中为其定义了一个 getter。

我也尝试将其作为 HTML 标记，如下所示：

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

这只是让标签成为翻译的一部分：

选择一个数字：.

换句话说，我怎样才能在翻译值中动态包含 UI 控件，将它们用作传递给 ngx-translate 的参数。

Answer 1

根据ngx-translatedocumentation，您应该执行以下操作。

在您的 HTML 模板中：

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

在你的组件文件中定义参数：

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

这将允许管道正确确定参数的值。

希望这会有所帮助。