本文只针对ngx-translate/core 6.x版本，如果你使用的是5.x或者更低的版本，请参照以下链接。
https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md
安装
首先需要安装npm依赖：
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save // 针对Angular>=4.3 npm install @ngx-translate/http-loader@0.1.0 --save // 针对Angular<4.3
这里需要注意，如果你使用的Angular版本是 Angular <4.3，那么需要安装http-loader@0.1.0版本。
因为0.1.0以后的版本TranslateHttpLoader构造函数的第一个参数改为HttpClient类型，而非Http类型。
用法
1、引入TranslateModule模块
首先需要在你项目的root NgModule中引入TranslateModule.forRoot()模块。一般在项目中默认命名为app.module.ts。
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
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的自定义方法而非内联方法。
即以下这种方式是不被允许的：
@NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: HttpClient) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
deps: [HttpClient]
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
2、注入TranslateService 服务
在需要用到的component里面注入TranslateService。
import {TranslateService} from '@ngx-translate/core';
然后在构造函数中定义当前应用的默认语言。
constructor(private translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// use the brower's default lang, if the lang isn't available, it will use the 'en'
let broswerLang = translate.getBrowserLang();
translate.use(broswerLang.match(/en|cn/) ? broswerLang : 'en');
}
3、翻译文本书写规则
有两种方式可以加载我们翻译好的语言文本。
首先你可以把翻译好的语言文本放到一个json文件中，然后通过TranslateHttpLoader来引用这个json文件。
例如：en.json
{
"HELLO": "hello {{value}}"
}
另外也可以通过setTranslation方法手动加载。
translate.setTranslation('en', {
HELLO: 'hello {{value}}'
});
同时，这里的json结构是支持嵌套的。
{
"HOME": {
"HELLO": "hello {{value}}"
}
}
以上结构，可以通过"HOME.HELLO"来引用HELLO的内容。
4、使用方法
我们可以通过TranslateService, TranslatePipe 或者 TranslateDirective这三种方式来获取我们翻译的文本内容。
TranslateService：
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
console.log(res);
//=> 'hello world'
});
其中第二个参数{value: 'world'}是可选的。
TranslateService：
{{ 'HELLO' | translate:param }}
param可以像如下方式在component里面定义。同样，这个参数也是可选的。
param = {value: 'world'};
TranslateDirective：
或者
HELLO
5、使用HTML标签
允许在你的翻译文本中直接嵌入HTML标签。
{
"HELLO": "Welcome to my Angular application!
This is an amazing app which uses the latest technologies!"
}
这时可以使用innerHTML 来进行渲染。
TranslateService API
公有属性(public properties):
defaultLang: string; currentLang: string; langs: string[]; translations: any;
公有方法(public methods):
setDefaultLang(lang: string): void; getDefaultLang(): string; use(lang: string): Observable; getTranslation(lang: string): Observable; setTranslation(lang: string, translations: Object, shouldMerge?: boolean): void; getLangs(): Array; addLangs(langs: Array ): void; getParsedResult(translations: any, key: any, interpolateParams?: Object): any; get(key: string | Array , interpolateParams?: Object): Observable ; stream(key: string | Array , interpolateParams?: Object): Observable ; instant(key: string | Array , interpolateParams?: Object): string | any; set(key: string, value: string, lang?: string): void; reloadLang(lang: string): Observable; resetLang(lang: string): void; getBrowserLang(): string; getBrowserCultureLang(): string;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
