ngx-translate实现国际化：this.translate.use()this.translate.get()this.translate.instant()onLangChange(代码片段

Posted 2021-07-17 Kabukiyo Lin

Angular ngx-translate实现国际化

• 准备工作
• • ① ngx-translate的前提配置
  • ② 创建国际化文件 assets -i18n
  • ③ 注入translateService服务
• 使用一、this.translate.use()
• 使用二、this.translate.get() 异步方法获取
• 使用三、this.translate.instant()同步方法 + onLangChange全局监听
• 总结

近期在项目中遇到了关于使用ngx-translate实现国际化的需求，并发现在项目中有些data在切换语言时刷新不及时，不灵敏。

排查出现Bug的地方后，抽空将ngx-translate实现国际化的过程和几种用法稍作总结，便于日后使用或他人有需时查看学习。

准备工作

① ngx-translate的前提配置

用npm install ngx-translate的依赖

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

导入包

import { TranslateModule, TranslateLoader,TranslateService} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

配置

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

② 创建国际化文件 assets -i18n

在assets文件夹下的i18n创建国际化文件，表示各个文本在不同语言下应作什么样的翻译。

举个例子：

//zh_cn.json
{
	"hello":"你好",
	"world":"世界",
}

//en.json
{
	"hello":"hello",
	"world":"world",
}

③ 注入translateService服务

在需要用到的此服务的component.ts中注入TranslateService服务，如：

import {TranslateService} from '@ngx-translate/core';

constructor{
	private translate : TranslateService;
}

到这里，ngx-translate的准备工作算是完成了。

使用一、this.translate.use()

ngx-translate的第一种最简答最常用的方法就是this.translate.use(currentLang)

一、使用translate.use()方法

html绑定触发函数

<button (click)="translateLanguage('zh_cn')">change to Chinese</button>

<button (click)="translateLanguage('en')">change to English</button>

在需要用到的此服务的component.ts中注入TranslateService服务，如：

import {TranslateService} from '@ngx-translate/core';

constructor{
	private translate : TranslateService;
}

切换函数：

translateLanguage(lang){
	this.translate.use(lang);
}

二、在html中使用 (最简单，将所要翻译文本写在Html中写死)

<span>{{ 'hello'| translate}}</span>
//或者
<span [translate]="hello">hello</span>

使用二、this.translate.get() 异步方法获取

this.translate.get()使用如下：

<h1>{{title}}</h1>

使用get方法获取翻译结果res，将res赋给ts文件中的this.title，html中的插值表达式{{title}}则能显示翻译结果

this.translate.get('title').subscribe( res=> {
	this.title = res;
});

使用三、this.translate.instant()同步方法 + onLangChange全局监听

this.translate.instant()与this.translate.get()的区别在于:

this.translate.get()方法是异步加载，而instant()方法是同步加载

单独使用instant()方法，有可能没来得及获取翻译文件，而html文档已经加载完了。所以需要配合onLangChange作全局监听。

伪代码：

 this.translate.onLangChange.subscribe((res: langChange) => {
      this.title = this.translate.instant('res');
});

总结

准备工作:

1. install 安装 ngx-translate的依赖
2. import 导入所需要的包 (TranslateModule, TranslateLoader,TranslateService,TranslateHttpLoader )
3. 模块配置
4. 创建国际化文件 assets -i18n
5. 注入translateService服务

使用总结

1. this.translate.use(currentLang)；
2. this.translate.get() 异步获取
3. this.translate.instant() 结合 onLangChange 全局监听

ngx-translate国际化的实现暂且记录到这里