ローカライズ (i18n)

現在、Ignite UI for Angular は、次の言語とスクリプトのリソース文字列で出荷されます: ブルガリア語、チェコ語、デンマーク語、オランダ語、英語、フランス語、ドイツ語、ハンガリー語、イタリア語、日本語、韓国語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語、スペイン語、スウェーデン語、トルコ語、繁体字中国語、簡体字中国語。これらは、igniteui-angular のデフォルトのローカライズとして提供される英語を除き、igniteui-angular-i18n パッケージ経由で利用できます。

最小限のコードで Ignite UI for Angular コンポーネントの文字列を簡単にローカライズできます。

Angular ローカライズの例

注: サンプルに含まれているヒンディー語 (HI) は、説明のみを目的としており、カスタムローカライズオブジェクトを渡す可能性を強調するためのものです。このサンプルでは、集計用にローカライズされたいくつかの文字列のみが含まれています。詳細については、以下の独自のローカライズされたリソースを使用するセクションを参照してください。

使用方法

npm パッケージからローカライズしたリソースを読み込む

次のように、igniteui-angular-i18n パッケージで利用可能な言語の 1 つでアプリケーションをローカライズできます。

npm install igniteui-angular-i18n --save-dev を実行してパッケージをインストールします。

目的の言語のリソース文字列をインポートし、コンポーネントの resourceStrings 入力を使用してコンポーネントインスタンスの文字列を変更します。

<igx-grid [data]="data" [resourceStrings]="resourcesDE" [locale]="locale">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>German Locale</igx-grid-toolbar-title>
    </igx-grid-toolbar>
    <igx-column field="ProductName" header="Product Name" [groupable]="true">
    </igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true">
    </igx-column>
    <igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [hasSummary]="true"
        [dataType]="'currency'" [groupable]="true">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [groupable]="true">
    </igx-column>
    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
    </igx-column>
</igx-grid>

import { Component } from '@angular/core';
import { registerLocaleData } from '@angular/common';

import localeDE from '@angular/common/locales/de';
import { GridResourceStringsDE } from 'igniteui-angular-i18n';

@Component({
    selector: 'app-locale',
    styleUrls: ['./locale.component.scss'],
    templateUrl: 'locale.component.html'
})
export class LocaleComponent implements OnInit {
    public resourcesDE = GridResourceStringsDE;
    public locale = 'DE';
    public data: any[];

    constructor() {
        registerLocaleData(localeDE);
    }
}

あるいは、対応するリソースオブジェクトを渡して changei18n() 関数を呼び出して、すべてのコンポーネントのローカライズを変更することもできます。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n } from "igniteui-angular";
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    public ngOnInit(): void {
        changei18n(IgxResourceStringsJA);
    }
}

注: より多くの言語を含む igniteui-angular-i18n パッケージに自由にコントリビュートしてください。

独自のローカライズされたリソースを活用する

changei18n 関数は IResourceStrings オブジェクトを必要とします。使用したい言語が igniteui-angular-i18n パッケージで利用できない場合、または単に特定の文字列を変更したい場合は、必要な言語とコンポーネントの文字列リソースを含むカスタムオブジェクトを渡すことができます。これにより、igniteui-angular コンポーネントのグローバル i18n が変更されます。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n, IGridResourceStrings } from "igniteui-angular";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    public partialCustomHindi: IGridResourceStrings;

    public ngOnInit(): void {
        this.partialCustomHindi = {
            igx_grid_summary_count: 'गणना',
            igx_grid_summary_min: 'न्यून',
            igx_grid_summary_max: 'अधिक',
            igx_grid_summary_sum: 'योग',
            igx_grid_summary_average: 'औसत'
        };
        // This will change all grid application instances' strings to the newly provided ones
        changei18n(this.partialCustomHindi);
    }
}

または、現在利用可能なすべてのコンポーネントリソース文字列を取得することもできます。各コンポーネントには、ローカライズ可能な文字列を含むオブジェクトがあります。ローカライズするために値を置き換えることができ、オブジェクトをパラメーターとして changei18n 関数に渡すことができます。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    public ngOnInit(): void {
        const currentRS = {
            ...GridResourceStringsEN,
            ...TimePickerResourceStringsEN
        };

        for (const key of Object.keys(currentRS)) {
            currentRS[key] = '[Localized] '+ currentRS[key];
        }

        changei18n(currentRS);
    }
}

コンポーネントの特定のインスタンスの文字列をローカライズ

単一の igx-grid インスタンスのみをローカライズする方法があります。resourceStrings プロパティを使用し IGridResourceStrings の新しいインスタンスを設定します。

const newGridRes: IGridResourceStrings = {
    igx_grid_filter: '[Localized]Filter',
    igx_grid_filter_row_close: '[Localized]Close'
}

this.grid.resourceStrings = newGridRes;

利用可能なリソース文字列

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。