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

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

选择一个数字：<page-size-selector></page-size-selector>。

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

Answer 1

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

在您的 HTML 模板中：

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

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

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

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

希望这可以帮助。