Angular Translate HTML标签

Question

我知道之前已经问过这个问题但是没有一个答案似乎适用于我的情况

我买了这个主题Angle,它正在使用Angular 1.4.2和Angular翻译2.6.0(甚至更新到2.7.2)

默认情况下,模板上有Translate模块

这是配置文件

  $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

我越来越

欢迎来到我的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

Angular在插值过程中清理任何html字符串.为了解决这个问题,您需要在注入之前将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 2

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

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