使用组件作为 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;
    }

仅使标签成为翻译的一部分：

Choose a number: <page-size-selector></page-size-selector>.

换句话说，如何将 UI 控件动态地包含在已翻译的值中，将它们用作传递给 ngx-translate 的参数。

Answer 1

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

在您的 HTML 模板中：

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

并在您的组件文件中定义参数：

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

这将使管道能够正确确定参数值。

希望这对您有所帮助。

Using a component as a parameter for a ngx-translate key