Как использовать json translate key в файле .ts в HTML-коде Angular 5 - PullRequest
Новая
       10

Как использовать json translate key в файле .ts в HTML-коде Angular 5

0 голосов
/ 11 мая 2018

Я работаю с проектом. Требуется перевести весь сайт с английского на тайский. Я сделал 95%, но столкнулся с проблемой, как использовать ключ json в HTML-коде, который находится в файле .ts.

.ts код 

{
          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 (я использовал такой перевод на HTML) 

<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>

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Наконец я решил это несколько дней назад.Ниже приведен код. 

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

  }
0 голосов
/ 11 мая 2018

Вы можете проанализировать эту строку HTML, используя DOMParser, а затем получить ключ следующим образом: 

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 }}
...