使用組件作為 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

這將允許管道正確確定參數的值。

希望這可以幫助。