현지화(i18n)

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

    몇 줄의 코드만으로 사용자는 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/core";
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-각 성분의 글로벌 i18n이 변경됩니다.

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

@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/core";

@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

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