Angular 翻译 HTML 个标签

Question

我知道之前有人在这里问过这个问题，但是 none 的答案似乎对我的情况有效

我购买了这个主题 Angle，它与 Angular 1.4.2 和 Angular 翻译 2.6.0 一起使用（甚至更新到最新的 2.7.2）

模板默认带有翻译模块

这是配置文件

  $translateProvider.useStaticFilesLoader({
      prefix : 'app/i18n/',
      suffix : '.json'
  });
  $translateProvider.preferredLanguage('es');
  $translateProvider.useLocalStorage();
  $translateProvider.usePostCompiling(true);
   // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before

以及 JSON 格式的翻译文件

  {
   "page": {
    "PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
  },

  "login": {
    .
    .
    .
    .
  },

但是我无法在 JSON 文件的文本中添加 HTML 标签，而不是获取

欢迎光临我的应用程序

我正在

欢迎使用我的APP

我该如何解决这个问题？

编辑

我不想删除标签，我的 JSON 文件被后端修改，它可以并且将包含 HTML 标签，我希望这些标签在输出上起作用。

内容绑定的 JADE 示例

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }}

Answer 1

But i cannot add HTML tags inside the text, on the JSON file, instead of getting

Welcome to MY APP

I'm getting

Welcome to

MY APP

你有一个 <br> 打破了这条线，就像你说的你不想要的，所以像这样删除它：

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },

Answer 2

Angular 在其插值期间清理任何 html 字符串。为了解决这个问题，您需要在注入之前在 $sce 中将 HTML 标记为安全。然后还使用 ngBindHtml 输出 html.

我以前没有用过 angular-translate，但这可能有用：

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>

Answer 3

用 AngularJS 1.4.7 测试过，我只用这个：

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

因为我不想注入任何过滤器，但以上只是对我自己信任的 i18n 字符串起作用。当然，接受的答案会更安全，但这个答案马上就可以了。

Answer 4

安装 ngSanitize 模块。

它使您能够绑定 html 内容，然后像这样更改您的代码：

ng-bind-html="'a_key_with_html' | translate"

Answer 5

我真的不想在我的 html 模板中使用标签。标签没有意义。

我终于让它工作了。环境：Angular 1.5.8，angular-翻译：2.11.0

我的解决办法是： 1. 加载 ngSanitize 并初始化模块

$translateProvider.useSanitizeValueStrategy('sanitize');
<p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>

Answer 6

您可以保持 JSON 文件原样，然后只需使用 HTML 中的 innerHTML 属性来呈现您的文本，如下所示：

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>

Angular 翻译 HTML 个标签

Angular Translate HTML tags

javascript

html

json

angularjs

angular-translate