使用angular-translate添加<strong>/粗体文本的翻译字符串

Question

我目前正在寻找一种解决方案，将一个单词以加粗的形式放入由angular-translate过滤器翻译的字符串中。以下是示例代码：（我相信解决方案很简单...只是我似乎无法弄清楚这个！）

我的语言JSON文件如下：

"AUTHENTICATE-ENTER-CODE": "blah blah blah"

在我的html文件中，我有以下内容（根据键值正确翻译）：

{{'AUTHENTICATE-ENTER-CODE' | translate}}

结果为："啦啦啦"

我要的结果是 "啦啦啦啦"

我可以将其分成多个翻译键，但特定翻译包含几句话中的多个粗体单词......而且我被告知尝试将翻译键最小化，因为我们在这个项目中有几百个。

我尝试将粗体 HTML 标记放在我想要加粗的字体周围（知道它不管用），但不管用！我还浏览了 angular-translate API，也没有找到我要的。

任何建议都可以！

- MattTanner

---

“AUTHENTICATE-ENTER-CODE”：“blah <b>blah</b> blah”不起作用？ - Aniket Sinha

如果您使用了消毒策略，那么这就不是问题。 - Overdrivr

可能是如何使用Angular-Translate处理包含HTML的字符串？的重复问题。 - Overdrivr

Answer 1

如果您在Angular 2+版本中使用i18n或任何其他JSON文件来存储内容，请使用以下方法：

Json文件

"TextWithHtmlExample": "blah <b>blah</b> blah"

文件（Angular 模板）

<p [innerHTML]="'TextWithHtmlExample' | translate"></p>

输出将会是-

无关紧要的废话。

- Umang Patwa

---

了不起的解决方案 - MightGod

Answer 2

翻译-编译

这是一个示例，我已经尝试使用HTML标记以及在翻译字符串中使用指令。

http://jsfiddle.net/walvekarnikhil/0j7pd40b/

<span translate="FOO" translate-compile></span>

- Nikhil Walvekar

---

translate-compile 实际上并没有执行这个操作（事实上，它默认是设置为 true 的）。你的 jsfiddle 能够工作的原因是因为你没有为 $translateProvider 设置清理策略，所以 angular-translate 不会对任何 HTML 进行转义。这也非常不安全，并且 angular-translate 在控制台警告你。 - NeuroXc

@NeuroXc，没错，翻译编译并不能解决问题。 - Nikhil Walvekar