Question

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

我买了这个主题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

我正在

欢迎来到＆lt; br＆gt;我的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

安装ngSanitize模块。

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

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

Answer 3

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

欢迎使用我的APP

我正在

欢迎光临

我的APP

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

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

  "login": {
    .
    .
    .
    .
  },

Answer 4

我实际上真的不想在我的html模板中使用这些标签。标签没有意义。

我终于开始工作了。环境：Angular 1.5.8，angular-tranlsate：2.11.0

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

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

Answer 5

使用AngularJS 1.4.7测试，我只是使用它：

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

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

Answer 6

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

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

Angular Translate HTML标签

6 个答案: