如何在 HTML 代码 Angular 5 中使用 .ts 文件中的 json 翻译键

Question

我正在处理一个项目，要求将整个网站英语翻译成泰语我做了 95%，但面临如何在 .ts 中的 HTML 代码中使用 json 键的问题文件。

.ts code

{
          element: '#step_two_element_id',
          intro: `
          <div class="mobile-verification-dialog">
          <div class="portlet light bordered">
              <div class="portlet-title">
                 <div class="caption font-green-sharp">
                    <i class="icon-users font-green-sharp"></i>
                    <span class="caption-subject bold uppercase">Mobile Phone Verification</span>
                    <span class="caption-helper hide"></span>
                  </div>
              </div>
              <div class="portlet-body">
                  <h5 class="pull-left">Enter your phone number to GET a free trial</h5>
                  <input type="text" class="form-control" placeholder="+15256458521" id="trialPhone">
                  <br/>
                  <input type="button" class="btn btn-primary pull-right" id="trialPhoneBtn" value="Send Code">
                  <br/><br/>
                  <small class="block text-right">You will receive verification code shortly.</small>
              </div>
           </div>
           </div>`,
          position: 'bottom'
        },

HTML (I used translate in HTML like this)

<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a routerLink="/dashboard">{{ 'HOME' | translate }}</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>{{ 'CONFIGURE_PAGES' | translate }} </span>
        </li>
    </ul>
</div>

Answer 1

您可以使用 DOMParser 解析该字符串 HTML，然后像这样获取密钥：

var parser = new DOMParser();
var doc = parser.parseFromString(jsonData.intro, "text/html");
//declare a global variable htmlKey
this.htmlKey = doc.getElementsByClassName("caption-subject")[0].innerHTML;

然后在你的HTML中你可以像这样使用你的管道：

{{ htmlKey | translate }}

Answer 2

几天前我终于解决了。下面是代码。

 initTour(lang) {
    if(lang === 'en'){

    var WELLCOME= 'Wellcome'
    var SEND_CODE = "Send code"
    var VERIFY = 'Verify'
    var CODE =  'Code'
    }

    else if(lang === 'th'){
    var WELLCOME= '惠康'
    var SEND_CODE = "发送代码"
    var VERIFY = '校验'
    var CODE =  '码'
    }

      var tourStep1Content = `
      <div class="portlet light bordered">
      <div class="portlet-title">
           <div class="caption font-green-sharp">
              <i class="icon-users font-green-sharp"></i>
              <span class="caption-subject bold uppercase">`+WELLCOME+`</span>
              <span class="caption-helper hide"></span>
            </div>
        </div>
        <div class="portlet-body">
            <h5>`+SEND_CODE+`</h5>
        </div>
     </div>`;

     var tourStep2Content = `
      <div class="mobile-verification-dialog">
      <div class="portlet light bordered">
          <div class="portlet-title">
             <div class="caption font-green-sharp">
                <i class="icon-users font-green-sharp"></i>
                <span class="caption-subject bold uppercase">`+VERIFY+`</span>
                <span class="caption-helper hide"></span>
              </div>
          </div>
          <div class="portlet-body">
              <h5 class="pull-left">`+CODE+`</h5>
              <input type="text" class="form-control" placeholder="5256458521" id="trialPhone">
              <br/>
          </div>
       </div>`;

    intro.setOptions({
      steps: [
        {
          element: '#tour_step_1',
          intro: tourStep1Content,
          position: 'left'
        },
        {
          element: '#step_two_element_id',
          intro: tourStep2Content,
          position: 'bottom'
        },

      ],
      exitOnEsc: true,
      exitOnOverlayClick: false,
      showStepNumbers: false,
      showBullets: true,
      showButtons: false
    });

  }

如何在 HTML 代码 Angular 5 中使用 .ts 文件中的 json 翻译键

How to Use json translate key in .ts file in HTML code Angular 5

angular-ui-router

angular-translate

angular2-forms

angular