时间戳

首页 > 解决方案 > 如何在 HTML 代码 Angular 5 中使用 .ts 文件中的 json translate 键

angular - 如何在 HTML 代码 Angular 5 中使用 .ts 文件中的 json translate 键

问题描述

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

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

标签： angularangular-ui-routerangular2-formsangular-translate

解决方案

您可以使用 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 }}

推荐阅读