步骤:
下载安装包:
npm install @ngx-translate/core@10.x --save
npm install @ngx-translate/http-loader@4.x --save
在项目中src/assets/
下创建i18n文件;
以下例子是中英文的json文件
json文件里写入数据
对应的中文:
大概就是这个样子哈,
在跟模块app.module.ts导入模块
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
中间省略
export function createTranslateHttpLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
===省略===
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateHttpLoader,
deps: [HttpClient]
}
}),
===省略===
]
})
在使用的组件的module.ts里引入
import { TranslateModule } from '@ngx-translate/core';
imports 里引入TranslateModule
在html中翻译文字:
<span class="title-text">{{ 'userGroup.userList' | translate }}</span>
//对应语言的json文件内分别都要有对应的文字
在ts文件中翻译文字:
//例子,当前页面的tab渲染:
在当前组件引入CommonService
在构造器中引入 private common: CommonService,
this.tabsUserArray = [
{ text: this.common.lang('userGroup.addedUser'), id: '0' },
{ text: this.common.lang('common.all'), id: '1' },
];
在ts文件中dialogs弹窗
当前场景下是删除:
this.dialogs.confirm(this.common.lang('common.dialogDelApp')).subscribe(
//略
删除按钮修改:
在core/dialogs.service.ts中:
在不同的语言下正则校验还会不一样,所以把正则表达式也维护在json文件中
需要注意的点:
在json文件里 \d 会报错,所以需要写\\d