ngx-translate库的安装

先奉上 ： ngx-translate 官网 和 GitHub的地址

在Angular项目中，我们主要用到了 @ngx-translate/core 和 @ngx-translate/http-loader 这两个模块，core模块是此库的核心，http-loader 是一个通过http调用翻译文件的加载器模块。

安装两包：

npm install @ngx-translate/core --save 
npm install @ngx-translate/http-loader --save

ngx-translate库的使用

1. 模块的导入

// app.module.ts
...
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 使用TranslateHttpLoader加载项目的本地语言json配置文件
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
   ...
   // 调用forRoot静态方法指定加载的文件
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
...

2. 初始化配置

// app.component.ts
...
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  constructor(private translate: TranslateService) { ...}

  ngOnInit(): void {
    const browserLang = this.translate.getBrowserLang();
    this.translate.addLangs(['en', 'de', 'zh']);
    this.translate.setDefaultLang('en');
    this.translate.use(browserLang);
    ...
  }
...

3. 在\src\assets\i18n\目录下创建 zh.json 和 en.json 文件

4. 在html模板中的应用

//  zh.json
"SELECT_TENANT": "选择租户",

// en.json
"SELECT_TENANT": "Select Tenant",

<label for="tenantName" >{{'SELECT_TENANT' | translate}}</label>

如图：

5. 在component中的应用

// zh.jsom
"DELETE": "删除",
"CANCEL": "取消",

// en.json
"DELETE": "Delete",
"CANCEL": "Cancel",

this.deleteBtnArr = [
      {
        btnName: this.translate.instant('DELETE'),
       ...
      },
      {
        btnName: this.translate.instant('CANCEL'),
      ...
      }
    ];

如图：

6. 有时候需要翻译的文本统一在constant文件中，例子中是用于表格展示

//zh.json
"RULE_NAME": "规则名称",
"RULE_ID": "规则ID",

//en.json
"RULE_NAME": "Rule Name",
"RULE_ID": "Rule Id",

 // constants.ts
RULE_HEADERS: [
    { key: 'ruleName', name: 'RULE_NAME', title: 'RULE_NAME', sorting: true, style: { width: '15%' } },
    { key: 'ruleID', name: 'RULE_ID', title: 'RULE_ID', sorting: false, style: { width: '25%' } },
  ...
  ],

// .component.ts
ruleHeaders: any = CONST.RULE_HEADERS;

//.html
 <th
         *ngFor="let header of ruleHeaders"
          class="rule-headers"
          title="{{ header.title | translate }}"
          ...
          >
           {{ header.name | translate}}
          ...
  </th>

废话不多说，上图：

7.error code

//zh.json
"UTSRE817": "无效的规则名称，值为空或超过100个字符",

//en.json
"UTSRE817": "Provided RuleName is invalid. Either null, empty, invalid or more than 100 characters",

// uts-interceptor.ts
        if (err['error'].hasOwnProperty('errors')) {
            if (err.error.errors.length > 0) {
              // msg = err.error.errors[0].message;
              let code = err.error.errors[0].code.split('.')[3];
              msg = this.translate.instant(code);
            }
          }

先写到这儿吧，在国际化过程中，经常会遇到刷新显示异常的问题，引起的原因不等，我遇到的大概总结如下，说法可能不太准确，仅供参考：

1. 在app.module.ts，app.component.ts根模块中初始化后不是万事大吉了，对于复杂的工程，都会有子模块，要记得在子module和component中同样要做初始化。
2. 对子模块初始化的时候要注意，子路由的默认路径是哪个component，要注意路由的设置
3. 遇到过一个问题，情景是在xx-service.ts中直接使用 required: this.translate.instant('RULE_NAME_REQUIRED'),这种做法会导致第一次显示正确，但是再次刷新此页面之后就会只显示key值RULE_NAME_REQUIRED，下面是正确的代码,：

// zh.json
"RULE_NAME_REQUIRED": "Rule name is required.",
"RULE_NAME_MINLENGTH": "Rule name should have atleast 5 characters.",

// en.json
"RULE_NAME_REQUIRED": "规则名是必需的",
"RULE_NAME_MINLENGTH": "规则名至少有5个字符",

// xx-service.ts
constructor(private translate: TranslateService) {
    this.validationMessages = {
      ruleName: {
        required: 'RULE_NAME_REQUIRED',
        minlength: 'RULE_NAME_MINLENGTH'
      },
     ...
    };
  }

// .component.ts 调用
getFieldInvalidMessage(field: string, type: string) {
    return this.translate.instant(this.rfs.validationMessages[field][type]);
  }

//.html中显示
 [errorMsg]="getFieldInvalidMessage('ruleName', 'required')"

如图：

好了，遇到新的问题再补充吧。。。