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

嘿，我懂你现在的困扰——模板里用translate管道翻译超顺手，但.ts文件里的内嵌HTML片段没法直接用这个语法对吧？别慌，咱们可以借助Angular的TranslateService来搞定这个问题，直接在组件类里拿到翻译后的文本，再拼进HTML字符串里就行。

具体操作步骤： #

1. 确保组件已注入TranslateService
   先在组件顶部导入翻译服务，再在构造函数里注入：

   import { TranslateService } from '@ngx-translate/core'; // 这是Angular最常用的翻译库，假设你用的是它
   
   constructor(private translate: TranslateService) { }
   

2. 准备翻译键与对应泰文内容
   先在你的泰文翻译JSON文件（比如th.json）里定义好对应键值对，比如：

   {
     "MOBILE_VERIFICATION": "การยืนยันหมายเลขโทรศัพท์มือถือ",
     "ENTER_PHONE_FOR_TRIAL": "ป้อนหมายเลขโทรศัพท์ของคุณเพื่อรับการทดลองใช้ฟรี",
     "PHONE_PLACEHOLDER": "+66xxxxxxxxx",
     "SEND_CODE": "ส่งรหัส",
     "VERIFICATION_CODE_NOTICE": "คุณจะได้รับรหัสยืนยันในไม่ช้า"
   }
   

3. 重构.ts里的内嵌HTML代码
   把原来硬编码的英文文本，替换成用translate.instant()获取的翻译内容，拼接成HTML字符串：

   { 
     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">${this.translate.instant('MOBILE_VERIFICATION')}</span> 
                       <span class="caption-helper hide"></span> 
                     </div> 
                   </div> 
                   <div class="portlet-body"> 
                     <h5 class="pull-left">${this.translate.instant('ENTER_PHONE_FOR_TRIAL')}</h5> 
                     <input type="text" class="form-control" placeholder="${this.translate.instant('PHONE_PLACEHOLDER')}" id="trialPhone"> 
                     <br/> 
                     <input type="button" class="btn btn-primary pull-right" id="trialPhoneBtn" value="${this.translate.instant('SEND_CODE')}"> 
                     <br/><br/> 
                     <small class="block text-right">${this.translate.instant('VERIFICATION_CODE_NOTICE')}</small> 
                   </div> 
                 </div> 
               </div>`, 
     position: 'bottom' 
   }, 
   

额外注意点： #

• 如果你的翻译文件是异步加载的（比如首次打开应用时才加载），instant()可能会直接返回键名（因为翻译内容还没加载完成），这种情况下可以用translate.get()结合订阅来处理：

  ngOnInit() {
    this.translate.get(['MOBILE_VERIFICATION', 'ENTER_PHONE_FOR_TRIAL']).subscribe(translations => {
      // 把翻译后的内容赋值给组件变量，再构建intro HTML字符串
      this.mobileVerificationTitle = translations['MOBILE_VERIFICATION'];
      this.phoneTrialText = translations['ENTER_PHONE_FOR_TRIAL'];
      // 其他变量同理，最后拼接HTML
    });
  }
  

• 要确保所有用到的翻译键都在对应语言的JSON文件里存在，不然会显示键名而非翻译后的文本。

这样修改后，.ts里的内嵌HTML就能和模板内容一样，自动使用泰文翻译了，剩下的5%工作应该就能顺利完成啦！

内容的提问来源于stack exchange，提问作者Naeem Hussain