欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 21:19:41
本文只针对版本,如果你使用的是5.x或者更低的版本,请参照以下链接。 https://github.com/ngx-translate/core/blob/fb02ca5...

本文只针对版本,如果你使用的是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:

<div>{{ 'hello' | translate:param }}</div>

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

param = {value: 'world'};

 translatedirective:

<div [translate]="'hello'" [translateparams]="{value: 'world'}"></div>

或者

<div translate [translateparams]="{value: 'world'}">hello</div>

5、使用html标签

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

{
  "hello": "welcome to my angular application!<br><strong>this is an amazing app which uses the latest technologies!</strong>"
}

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

<div [innerhtml]="'hello' | translate"></div>

translateservice api

公有属性(public properties):

/**
 * the default lang to fallback when translations are missing on the current lang
 */
defaultlang: string;
/**
 * the lang currently used
 * @type {string}
 */
currentlang: string;
/**
 * an array of langs
 * @type {array}
 */
langs: string[];
/**
 * a list of translations per lang
 * @type {{}}
 */
translations: any;

公有方法(public methods):

/**
 * sets the default language to use as a fallback
 * @param lang
 */
setdefaultlang(lang: string): void;
/**
 * gets the default language used
 * @returns string
 */
getdefaultlang(): string;
/**
 * changes the lang currently used
 * @param lang
 * @returns {observable<*>}
 */
use(lang: string): observable<any>;
/**
 * 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<any>;
/**
 * 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<string>;
/**
 * @param langs
 * add available langs
 */
addlangs(langs: array<string>): 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<string>, interpolateparams?: object): observable<string | any>;
/**
 * 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<string>, interpolateparams?: object): observable<string | any>;
/**
 * 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<string>, 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<any>}
 */
reloadlang(lang: string): observable<any>;
/**
 * 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;

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