[英]Using a component as a parameter for a ngx-translate key
I'm using ngx-translate in my project.我在我的项目中使用ngx-translate 。 I want to use an Angular Material component (mat-form-field), as part of the translation's value.
我想使用 Angular Material 组件(mat-form-field)作为翻译值的一部分。 Example:
例子:
Key: NumberChoice
键:
NumberChoice
Value: Choose a number: {{choice}}.
值:
Choose a number: {{choice}}.
Use in the HTML:在 HTML 中使用:
<span>{{ 'NumberChoice' | translate: {choice: this.choiceSelectorComponent} }}</span>
choiceSelectorComponent
is the mentioned above mat-form-field. choiceSelectorComponent
就是上面提到的 mat-form-field。
I tried putting the code for the mat-form-field in a new ng component and defined a getter for it in the matching .ts
file.我尝试将 mat-form-field 的代码放在一个新的 ng 组件中,并在匹配的
.ts
文件中为它定义了一个 getter。
I also tried to get it as an HTML tag like so:我还尝试将其作为 HTML 标记获取,如下所示:
get choiceSelectorComponent() { return document.createElement('page-size-selector').outerHTML; }
Which only made the tag be part of the translation:这只使标签成为翻译的一部分:
Choose a number: <page-size-selector></page-size-selector>.
选择一个数字:<page-size-selector></page-size-selector>。
In other words, how can I include UI controls inside a translated value dynamically, using them as parameters to pass to ngx-translate
.换句话说,我如何动态地将 UI 控件包含在翻译值中,将它们用作传递给
ngx-translate
参数。
According to ngx-translate
documentation , you should do the following.根据
ngx-translate
文档,您应该执行以下操作。
In your HTML template:在您的 HTML 模板中:
<span>{{ 'NumberChoice' | translate:choice} }}</span>
And in your component file you define param:在你的组件文件中定义参数:
param = this.choiceSelectorComponent() // Or whatever value you want
This will allow the pipe to determine the value of the parameters correctly.这将允许管道正确确定参数的值。
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.