Angular2 +国際化のサンプルコード(ngx-translate)

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

この記事は、 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/[email protected] -save // 针对Angular<4.3

Angular <4.3のAngularバージョンを使用している場合は、 [email protected]バージョンをインストールする必要があります。

バージョン0.1.0以降のTranslateHttpLoaderコンストラクタの最初のパラメータはHttpClient型ではなく、Http型に変更されているためです。

使い方

1、TranslateModuleモジュールの導入

まず、プロジェクトのルート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は、インライン・メソッドではなくエクスポート・カスタム・メソッドでなければなりません。

つまり、次の方法は許可されていません。


@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サービスを注入する

使用するコンポーネントに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.翻訳テキスト作成ルール

翻訳された言語テキストを読み込むには2通りの方法があります。

まず、翻訳された言語のテキストを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'
});

2番目のパラメータ{value: 'world'}はオプションです。

TranslateService:


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

Paramは、次のようにコンポーネントで定義できます。 ここでも、このパラメータはオプションです。


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

パブリックプロパティ:


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

パブリックメソッド:


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

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ