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库的使用
- 模块的导入
// 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]
}
})
],
...
- 初始化配置
// 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);
...
}
...
-
在\src\assets\i18n\目录下创建 zh.json 和 en.json 文件
-
在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'),
...
}
];
如图:
- 有时候需要翻译的文本统一在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);
}
}
先写到这儿吧,在国际化过程中,经常会遇到刷新显示异常的问题,引起的原因不等,我遇到的大概总结如下,说法可能不太准确,仅供参考:
- 在app.module.ts,app.component.ts根模块中初始化后不是万事大吉了,对于复杂的工程,都会有子模块,要记得在子module和component中同样要做初始化。
- 对子模块初始化的时候要注意,子路由的默认路径是哪个component,要注意路由的设置
- 遇到过一个问题,情景是在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')"
如图:
好了,遇到新的问题再补充吧。。。