Angular2+国际化方案(ngx-translate)的示例代码

前端之家收集整理的这篇文章主要介绍了Angular2+国际化方案(ngx-translate)的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文只针对ngx-translate/core 6.x版本,如果你使用的是5.x或者更低的版本,请参照以下链接

https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md

安装

首先需要安装npm依赖:

=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。

@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的自定义方法而非内联方法

即以下这种方式是不被允许的:

new TranslateStaticLoader(http,'/assets/i18n','.json'),deps: [HttpClient] }) ],bootstrap: [AppComponent] }) export class AppModule { }

2、注入TranslateService 服务

在需要用到的component里面注入TranslateService。

然后在构造函数中定义当前应用的默认语言。

// 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

另外也可以通过setTranslation方法手动加载。

同时,这里的json结构是支持嵌套的。

以上结构,可以通过"HOME.HELLO"来引用HELLO的内容

4、使用方法

我们可以通过TranslateService,TranslatePipe 或者 TranslateDirective这三种方式来获取我们翻译的文本内容

TranslateService:

{ console.log(res); //=> 'hello world' });

其中第二个参数{value: 'world'}是可选的。

TranslateService:

{{ 'HELLO' | translate:param }}

param可以像如下方式在component里面定义。同样,这个参数也是可选的。

TranslateDirective:

或者

5、使用HTML标签

允许在你的翻译文本中直接嵌入HTML标签

This is an amazing app which uses the latest technologies!

" }

这时可以使用innerHTML 来进行渲染。

TranslateService API

公有属性(public properties):

公有方法(public methods):

} */ use(lang: string): Observable; /** * Gets an object of translations for a given language with the current loader * and passes it through the compiler * @param lang * @returns {Observable<*>} */ getTranslation(lang: string): Observable; /** * Manually sets an object of translations for a given language * after passing it through the compiler * @param lang * @param translations * @param shouldMerge */ setTranslation(lang: string,translations: Object,shouldMerge?: boolean): void; /** * Returns an array of currently available langs * @returns {any} */ getLangs(): Array; /** * @param langs * Add available langs */ addLangs(langs: Array): void; /** * Returns the parsed result of the translations * @param translations * @param key * @param interpolateParams * @returns {any} */ getParsedResult(translations: any,key: any,interpolateParams?: Object): any; /** * Gets the translated value of a key (or an array of keys) * @param key * @param interpolateParams * @returns {any} the translated key,or an object of translated keys */ get(key: string | Array,interpolateParams?: Object): Observable; /** * Returns a stream of translated values of a key (or an array of keys) which updates * whenever the language changes. * @param key * @param interpolateParams * @returns {any} A stream of the translated key,or an object of translated keys */ stream(key: string | Array,interpolateParams?: Object): Observable; /** * Returns a translation instantly from the internal state of loaded translation. * All rules regarding the current language,the preferred language of even fallback languages will be used except any promise handling. * @param key * @param interpolateParams * @returns {string} */ instant(key: string | Array,interpolateParams?: Object): string | any; /** * Sets the translated value of a key,after compiling it * @param key * @param value * @param lang */ set(key: string,value: string,lang?: string): void; /** * Allows to reload the lang file from the file * @param lang * @returns {Observable} */ reloadLang(lang: string): Observable; /** * Deletes inner translation * @param lang */ resetLang(lang: string): void; /** * Returns the language code name from the browser,e.g. "de" * * @returns string */ getBrowserLang(): string; /** * Returns the culture language code name from the browser,e.g. "de-DE" * * @returns string */ getBrowserCultureLang(): string;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章