本篇文章介绍的方法并非是浏览器识别翻译，它可以根据您的要求实现不同语言的精准翻译，不同于angualr官方的实现方式。
一、利用npm下载ngx-translate的依赖库
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
-
注意：请选择与您的angular版本相对应的版本，具体可参考下面截图（来自ngx-translate官网）
Choose the version corresponding to your Angular version
二、引入TranslateModule模块
- 在项目根模块(app.module.ts)中导入支持的包
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
- 在项目根模块中配置ngx-translate
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import {
TranslateModule,
TranslateLoader,
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
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]
})
export class AppModule { }
- 在需要使用ngx-translate的module引入TranslateModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { LoginRoutingModule } from './login-routing.module';
@NgModule({
imports: [
CommonModule,
TranslateModule,
LoginRoutingModule,
]
})
export class LoginModule { }
三、注入TranslateService 服务
- 在需要用到的component里面注入TranslateService
import {TranslateService} from '@ngx-translate/core';
- 通过服务设置当前应用的语言
constructor(private translate: TranslateService) {
this.translate.use('en-US');
}
四、创建国际化文件
- 根据根模块的配置，在assets文件中再创建一个文件夹i18n，然后在i18n的文件夹下创建国际化文件，可以是en-US.json(英文)、zh_CN.json(中文)、es_ES.json(西班牙)，this.translate.use('en-US')用的就是en-US.json翻译文件，如果要使用其他两个翻译文件就是this.translate.use('zh_CN')、this.translate.use('es_ES')
// en-US.json
{
"welcome":"welcome to this app",
"getName":"hello I am {{name}}"
}
// zh_CN.json
{
"welcome":"欢迎使用本应用",
"getName":"你好，我是{{name}}"
}
五、国际化的具体应用
- 使用管道来翻译输入信息
<span>{{ 'welcome '| translate}}</span>
- 使用指令来翻译指定信息
<span [translate]="'welcome'">welcome</span>
- 使用服务翻译指定信息
import {TranslateService} from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
this.translate.get('welcome').subscribe((res: string) => {
console.log(res); // welcome to this app
this.welcomeTranslate = res;
});
- 对带参数的信息进行翻译--翻译管道中带参数
<span>{{"getName" | translate: {name:"crk"} }}</span>
- 对带参数的信息进行翻译--翻译指令带参数
<span
[translate]="getName"
[translateParams]="{'name':'ggg'}">
getName
</span>
- 对带参数的信息进行翻译--翻译服务带参数
import {TranslateService} from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
this.translate.get('getName',this.param).subscribe((res: string) => {
console.log(res);
this.getNameTranslate = res;
});
注意：项目中如果对http的request请求进行封装，应避免对加载国际化文件产生影响，例如
const regex = new RegExp('^(http://|https://|//)');
// 排除对国际化文件请求的封装
if (!regex.test(url) && url.indexOf('assets/i18n') === -1) {
url = this._apiSettings.baseUrl + url;
}
以上，是因项目开发需要，参照一些文章在学习和应用ngx-translate的过程中所遇问题的一些总结，希望对您有所帮助！
