本文只针对ngx-translate/core 6.x版本,如果你使用的是5.x或者更低的版本,请参照以下链接。
https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md
安装
首先需要安装npm依赖:
这里需要注意,如果你使用的Angular版本是 Angular <4.3,那么需要安装http-loader@0.1.0版本。
因为0.1.0以后的版本TranslateHttpLoader构造函数的第一个参数改为HttpClient类型,而非Http类型。
用法
1、引入TranslateModule模块
首先需要在你项目的root NgModule中引入TranslateModule.forRoot()模块。一般在项目中默认命名为app.module.ts。
imports: [
BrowserModule,HttpClientModule,TranslateModule.forRoot({
loader: {
provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [HttpClient]
}
})
],bootstrap: [AppComponent]
})
export class AppModule { }
这里使用了TranslateHttpLoader 来加载我们定义好的语言文件。"/assets/i18n/[lang].json"这里的lang就是当前正在使用的语言。
注意:如果当前采用的是AOT编译方式或者是ionic2工程,那么useFactory对应的必须是一个export的自定义方法而非内联方法。
即以下这种方式是不被允许的:
2、注入TranslateService 服务
在需要用到的component里面注入TranslateService。
然后在构造函数中定义当前应用的默认语言。
let broswerLang = translate.getBrowserLang();
translate.use(broswerLang.match(/en|cn/) ? broswerLang : 'en');
}
3、翻译文本书写规则
有两种方式可以加载我们翻译好的语言文本。
首先你可以把翻译好的语言文本放到一个json文件中,然后通过TranslateHttpLoader来引用这个json文件。
例如:en.json
另外也可以通过setTranslation方法手动加载。
同时,这里的json结构是支持嵌套的。
以上结构,可以通过"HOME.HELLO"来引用HELLO的内容。
4、使用方法
我们可以通过TranslateService,TranslatePipe 或者 TranslateDirective这三种方式来获取我们翻译的文本内容。
TranslateService:
其中第二个参数{value: 'world'}是可选的。
TranslateService: