本文只针对ngx-translate/核心6. x版本,如果你使用的是5. x或者更低的版本,请参照以下链接。
https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md
<>强安装
首先需要安装npm依赖:
npm安装@ngx-translate/核心——保存
npm安装@ngx-translate/http-loader——保存//针对Angular>=4.3
npm安装@ngx-translate/http-loader@0.1.0——保存//针对Angular<4.3
这里需要注意,如果你使用的角版本是角& lt; 4.3,那么需要安装http-loader@0.1.0版本。
因为0.1.0以后的版本TranslateHttpLoader构造函数的第一个参数改为HttpClient类型,而非Http类型。
<强>用法
<强> 1,引入TranslateModule模块
首先需要在你项目的根NgModule中引入TranslateModule.forRoot()模块。一般在项目中默认命名为app.module.ts。
从“@angular进口{NgModule}/核心”;
从“@angular/platform-browser”进口{BrowserModule};
进口{HttpClientModule, HttpClient}“@angular/共同/http”;
从“@ngx-translate进口{TranslateModule, TranslateLoader}/核心”;
从“@ngx-translate/http-loader”进口{TranslateHttpLoader};
从”。进口{AppComponent}/app”;
导出功能createTranslateLoader (http: HttpClient) {
返回新TranslateHttpLoader (http、”。/资产/i18n/, . json);
}
@NgModule ({
进口:[
BrowserModule,
HttpClientModule,
TranslateModule.forRoot ({
装载机:{
提供:TranslateLoader,
useFactory:(createTranslateLoader),
deps (HttpClient):
}
})
),
引导(AppComponent):
})
出口类AppModule {}
之前
这里使用了TranslateHttpLoader来加载我们定义好的语言文件。“/资产/i18n/lang . json”这里的郎就是当前正在使用的语言。
注意:如果当前采用的是AOT编译方式或者是ionic2工程,那么useFactory对应的必须是一个出口的自定义方法而非内联方法。
,即以下这种方式是不被允许的:
@NgModule ({
进口:[
BrowserModule,
step 4,
TranslateModule.forRoot ({
提供:TranslateLoader,
useFactory: (http: HttpClient)=比;新TranslateStaticLoader (http/资产/i18n, . json),
deps (HttpClient):
})
),
引导(AppComponent):
})
出口类AppModule {}
<强> 2,注入TranslateService服务
在需要用到的组件里面注入TranslateService。
从“@ngx-translate进口{TranslateService}/核心”;
然后在构造函数中定义当前应用的默认语言。
构造函数(私人翻译:TranslateService) {//这种语言将被用作一个后备当翻译不是发现在当前的语言
translate.setDefaultLang (en);//使用浏览器的默认朗,如果朗并不可用,它将使用“en”
让broswerLang=translate.getBrowserLang ();
translate.use (broswerLang.match (/en |cn/) & # 63;broswerLang:“en”);
}
之前
<强> 3,翻译文本书写规则
有两种方式可以加载我们翻译好的语言文本。
首先你可以把翻译好的语言文本放到一个json文件中,然后通过TranslateHttpLoader来引用这个json文件。
例如:en.json
{
“你好”:“你好,{{value}}”
}
另外也可以通过调用setTranslation方法手动加载。
翻译。调用setTranslation (“en”{
你好:“你好{{value}}”
});
同时,这里的json结构是支持嵌套的
。
{
“家”:{
“你好”:“你好,{{value}}”
}
}
以上结构,可以通过“HOME.HELLO”来引用喂的内容只
<强> 4,使用方法
我们可以通过TranslateService, TranslatePipe或者TranslateDirective这三种方式来获取我们翻译的文本内容。
TranslateService:
翻译。get(‘你好’,{值:'世界'})。订阅((res:字符串)=比;{
console.log (res);//=比;“hello world”
});
其中第二个参数{值:‘世界’}是可选的只
TranslateService:
& lt; div>{{'你好' |翻译:param}} & lt;/div>
