字符串中的 Angular 2 绑定表达式（ng2-translate）答案

【问题标题】：Angular 2 binding expression in string (ng2-translate)字符串中的 Angular 2 绑定表达式（ng2-translate）
【发布时间】：2016-09-29 08:22:36
【问题描述】：

我正在使用 ng2-translate 在 Angular 2 中进行国际化。我有一个包含如下字符串的标签：

<label> Step {{stepNumber}} of {{totalSteps}} </label>

其中 stepNumber 和 totalSteps 是我的组件中的属性。

为了国际化，我将一个密钥存储在我的资源文件中并与 ng2-translate 管道一起使用。

en.json:

{
  "KEY_STEP_COUNT": "Step {{stepNumber}} of {{totalSteps}}"
}

fr.json:

{
  "KEY_STEP_COUNT": "Étape {{stepNumber}} sur {{totalSteps}}"
}

在我的html中使用它如下：

<label> {{ 'KEY_STEP_COUNT' | translate}} </label>

我得到的输出是

zh:

"Step {{stepNumber}} of {{totalSteps}}"

法国：

"Étape {{stepNumber}} sur {{totalSteps}}"

预期输出：

zh:

"Step 1 of 11"

法国：

"Étape 1 sur 11"

是否可以在使用 angular2 的字符串绑定中添加表达式？

如果可能的话，我想使用 angular2 绑定而不是 string.replace。

感谢您的帮助！！！

【问题讨论】：

嗨 shaikhspear，你能分享一下你如何为 angular2 配置 ng2-translate 的基础知识吗？我上次尝试到现在为止，但最后在全球范围内注册存在问题使用 transle-module 在模块中翻译管道。

【解决方案1】：

您必须添加一个对象作为管道参数，例如：

{{ 'KEY_STEP_COUNT' | translate: {stepNumber: 15, totalSteps: 25} }}

【讨论】：

太棒了！！！谢谢你。除此之外，我们可以在类型脚本中使用 TranslateParser。 this.parser.interpolate(this.translateService.instant("KEY_STEP_COUNT"), { maxUploadSize: maxUploadSize }));