javascript - Angular-Translate:将冒号/字符添加到翻译后的字符串中

Question

我使用 Angular 翻译并且我有例如这个翻译:

'INFO_TEXT': 'My translation'

我可以通过以下方式将其包含到我的模板中:

<li translate='INFO_TEXT'></li>
<li>{{'INFO_TEXT' | translate}}</li>

所以我会得到这样的结果:

<li>My translation</li>

但我想要的是翻译后跟冒号:

<li>My translation:</li>

那么我该怎么做呢？如何将字符添加到翻译后的字符串中？我不想在翻译中添加冒号，因为我认为它不应该在那里，所以我会更灵活，我可以不带冒号或带冒号使用它。

我当然可以做某事。像这样

<li>{{'INFO_TEXT' | translate}}:</li>

但由于性能原因，我想避免使用带大括号的版本，并且如果尚未加载/评估它，您将看到第二个 {{'INFO_TEXT |翻译'}}，这不太好。

Answer 1

我用 CSS 做到了这一点:

.colon-suffix:after {
  content: ":";
}

<li translate="INFO_TEXT" class="colon-suffix"></li>

作为一个额外的好处，当使用 :after 伪类时，对于从右到左的语言，冒号将显示在正确的一侧。