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

Question

I am working with a project the requirement is translate the whole website english to thai I did 95% but facing an issue how to use json key in HTML code which is in .ts file.

.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

You can parse that string HTML using DOMParser and then get the key like this:

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;

Then in your HTML you can use your pipe like this:

{{ htmlKey | translate }}

Answer 2

Finally i solved it out some days before. Below is code.

 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
    });

  }