현지화(i18n)

현재 Ignite UI for Angular는 불가리아어, 체코어, 덴마크어, 네덜란드어, 영어, 프랑스어, 독일어, 헝가리어, 이탈리아어, 일본어, 한국어, 노르웨이어, 폴란드어, 포르투갈어, 루마니아어, 스페인어, 스웨덴어와 같은 언어 및 스크립트에 대한 리소스 문자열과 함께 제공됩니다. , 터키어, 중국어 번체(zh-Hant) 및 중국어 간체(zh-Hans). igniteui-angular에서 기본 지역화로 제공되는 영어를 제외하고는 igniteui igniteui-angular igniteui-angular-i18n 패키지를 통해 사용할 수 있습니다.

단 몇 줄의 코드만으로 사용자는 Ignite UI for Angular 구성 요소에서 현지화 문자열을 쉽게 변경할 수 있습니다.

Angular Localization Example

참고: 샘플에 포함된 힌디어(HI)는 설명 목적으로만 사용되었으며 사용자 지정 현지화 개체 전달 가능성을 강조하기 위한 것입니다. 이 샘플에는 요약을 위해 현지화된 여러 문자열만 포함되어 있습니다. 자세한 내용은 아래의 현지화된 리소스 활용 섹션을 참조하세요.

Usage

Load localized resources from npm package

다음과 같이 igniteui-angular-i18n 패키지에서 사용 가능한 언어 중 하나로 애플리케이션을 지역화할 수 있습니다.

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 패키지에 자유롭게 기여해 주세요!

Utilize own localized resources

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);
    }
}

Localize specific strings for a specific instance of a component

단일 igx-grid 인스턴스만 현지화해야 하는 경우 방법이 있습니다. resourceStrings 속성을 사용해야 하며 IGridResourceStrings 유형의 새 인스턴스로 설정해야 합니다.

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

this.grid.resourceStrings = newGridRes;

Available resource strings

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.