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

Question

我使用angular-translate并且我有例如这个翻译：

'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 | translate'}}，那就不好了。

score 1 · Accepted Answer

我用 CSS 做到了这一点：

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

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

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

score 0 · Accepted Answer

您可以像这样创建自定义过滤器：

app.filter('translate', function(){
  return function(text){
      return text + ':';
  }
});

2 回答 2