web-dev-qa-db-ja.com

Angular HTMLタグを翻訳

私はこれが以前にここで尋ねられたことを知っていますが、私の答えはどれもうまくいかないようです

私はこのテーマを購入しました 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タグを追加することはできません

マイアプリへようこそ

私は得ています

<br> MY APPへようこそ

どうすれば修正できますか？

[〜＃〜]編集[〜＃〜]

タグを削除したくありません。JSONファイルはバックエンドによって変更され、HTMLタグを含めることができます。また、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 }}
javascripthtmljsonangularjsangular-translate
14
Danny22

Angularは、補間中にhtml文字列をサニタイズします。これを回避するには、注入する前に、HTMLを$ sceで安全であるとマークする必要があります。次に、ngBindHtmlを使用してHTMLを出力します。

私は以前に角度変換を使用したことがありませんが、これはうまくいくかもしれません：

//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>
19
LessQuesar

AngularJS 1.4.7でテストしました、これを使用します：

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

フィルターを挿入したくないので、上記は私自身の信頼できるi18n文字列で動作します。もちろん、受け入れられた答えの方が安全ですが、これはすぐに機能します。

2
Osify

NgSanitizeモジュールをインストールします。

それはあなたがhtmlコンテンツをバインドすることを可能にし、そして次のようにあなたのコードを変更します：

ng-bind-html="'a_key_with_html' | translate"
2
Serdar Değirmenci

私は実際には自分のhtmlテンプレートでタグを使用したくありません。タグは意味がありません。

ようやく動作しました。環境：Angular 1.5.8、angular-tranlsate：2.11.0

私の解決策は：1. ngSanitizeをロードしてモジュールを初期化する

  1. $translateProvider.useSanitizeValueStrategy('sanitize');

  2. <p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>

1
Bing Wu

JSONファイルをそのまま保持し、innerHTMLのHTML属性を使用してテキストを次のようにレンダリングできます。

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

しかし、私は取得する代わりに、JSONファイルのテキスト内にHTMLタグを追加できません

マイアプリへようこそ

私は得ています

ようこそ

マイアプリ

あなたが持っている <br>これは、あなたがしたくないと言ったように改行しています。

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

  "login": {
    .
    .
    .
    .
  },
1
IfTrue