Angular-translate笔记

Angular-translate笔记

在已经保证 translate 功能 (国际化) 可以使用的前提下，翻译可以有两种写法，分别是在HTML中和TS中完成翻译。

• 在HTML中使用 管道 （ | ） 翻译

  示例如：

  <label>
      {
       
       {I18nMessage.DEMO.DEMO_TEST | translate}}
  </label>
  

  i18nMessage 为存放翻译相关的值的静态常量类

  export class I18nMessage {
         
         
  	static DEMO {
         
         
  		DEMO_TEST: 'demo.demoTest'
  	}
  }
  

  'demo.demoTest' 为存放在数据库表中关键字段 “ key ”，比如数据库表中的这条记录为：

  id	key	value	language	date
  1	demo.demoTest	Test	ch	时间戳
  2	demo.demoTest	测试	zh	时间戳

• 在TS文件中使用 TranslateService 翻译

  HTML相关部分

  <p-radioButton label="{
         
         {demo}}"></p-radioButton>
  
  <p-radioButton [label]="demo"></p-radioButton>
  

  TS文件内容

  import {
        
         TranslateService } from '@ngx-translate/core';
  
  export class DemoComponent implements OnInit, OnDestroy {
        
        
    demo: string;
  
    private _subscription: Subscription = new Subscription();
  
    constructor(
        private readonly _translateService: TranslateService
    ) {
        
        
    }
  
    ngOnInit(): void {
        
        
        initData();
        initTranslate();
    }
    
    initData(): void {
        
        
        demo = this._translateService.instant(I18nMessage.DEMO.DEMO_TEST);
    }
  
    /**
     * Init translate data
     * @private
     */
    private initTranslate() {
        
        
      this._subscription.add(
          this._translateService.onLangChange.subscribe(() => {
        
        
            this.initData();
          })
      );
    }
      
    ngOnDestroy(): void {
        
        
      this._subscription.unsubscribe();
    }
  }
  

  initTranslate 方法中，onLangChange 事件只有在语言切换时才会发生，所有在 initTranslate 方法前需要调用 initData() 方法。否则在初始化时 字段 不显示，只有在切换语言后 字段 才能正常显示。
  错误情况如下：