현지화(i18n)

참고: 21.1.0 기준으로 Ignite UI for Angular 구성 요소에 로컬라이제이션을 적용하는 권장 방법입니다.

새로운 현지화를 통해 모든 로컬에 대한 현지화 문자열과 서식에 대한 요구가 줄어든 더 많은 기능을 도입했습니다. 이제 서식은 API에서 도입한Intl 표준을 기반으로 합니다.

현재 Ignite UI for Angular는 다음 언어들의 자원 문자열을 함께 제공하고 있습니다:Bulgarian,,Czech,DanishDutchEnglishFrenchGermanHungarianItalianJapaneseKoreanNorwegianPolishPortugueseRomanianSpanishSwedishTurkishTraditional Chinese (zh-Hant) 그리고 . 이들은 패키지를 통해Simplified Chinese (zh-Hans) 제공되지만, 영어는 기본 현지화igniteui-angular-i18n로 제공됩니다.igniteui-angular

Angular Localization Example

참고: 샘플에 포함된 힌디어(HI)는 설명 목적과 맞춤형 현지화 객체 전달 가능성을 강조하기 위한 것입니다. 이 샘플에서는 요약을 위한 여러 현지화된 문자열만 포함되어 있습니다. 자세한 내용은 아래 맞춤 현지화 리소스 섹션에서 확인할 수 있습니다.

Locale

로지(locale)는 지구상의 다양한 언어와 지역을 정의하는 일반 문자열을 참조할 것입니다. 저희 경우에는 BCP 47 태그 정의를 기반으로 하며, 대부분의 기본 문자열은 IANA 언어 하위 태그 등록 부에 설명되어 있습니다. 언어 목록은 ISO 639 언어 표준을 참조할 수도 있습니다.

이는 날짜와 숫자의 형식, 그리고 컴포넌트가 사용하는 지역화된 자원 문자열에 영향을 미칩니다. Ignite UI for Angular 컴포넌트의 기본 로컬은 다음과 같습니다en-US.

로케이션을 설정할 수 있는 방법은 여러 가지가 있습니다. 전역적이거나 컴포넌트별로 설정할 수 있습니다.

Global API

패키지에서 나오setCurrentI18n는igniteui-angular 메서드를 사용하여 전역적으로 사용할 로컬을 설정할 수 있습니다. 이 방법은 모든 컴포넌트에서 사용되는 포맷팅과 등록된 리소스 문자열에 영향을 미칩니다. 리소스 문자열에 대해 더 알고 싶다면 Localized resource strings를 참고하세요

setCurrentI18n('de');

지원되는 모든 가능한 로컬을Intl 지원합니다. 유효하지 않거나 지원되지 않는 로컬을 제공하면, 당분간 기본en-US 로컬을 사용하다가 유효한 로케이로 변경할 때까지 계속 사용됩니다.

일반적으로 사용할 태그의 언어, 지역, 스크립트로 자원을 등록하여 컴포넌트도 현지화되도록 해야 합니다. 자세한 내용은 지역 및 스크립트 섹션을 참조하세요.

`lang` attribute

이 접근법을 통해 태그의lang 글로벌 속성을 통해HTML 로컬라이제이션을 설정할 수 있습니다. 이 속성은 감시되고 있으며, 변경되면 모든 렌더링된 컴포넌트가 현재 설정된 언어로 자원 문자열을 업데이트합니다. 사용되는 태그에 관한 모든 규칙은 위에서 설명한 대로 적용됩니다.

참고: 이 방법은 루트 레벨에서만 작동하며 페이지 내 내부 요소에는 적용되지 않습니다.

<html lang="ja">
    <head>
        <title>My app</title>
    </head>
    <body></body>
</html>

Angular API

또한 Angular 내장된 LOCALE_ID 토큰을 사용해 전체 애플리케이션의 로컬을 설정할 수도 있습니다. 제공된 태그는 API가 처리하는 방식과 동일하게 컴포넌트에 적용됩니다.

Per component

각 컴포넌트는 고유한 속성을 가지고locale 있는데, 이를 지정할 수 있으면 글로벌 로케이션의 영향을 받지 않습니다.

<igx-grid [data]="data" locale="ja">
    <igx-column field="ProductName" header="Product Name" [groupable]="true"></igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true"></igx-column>
</igx-grid>

Formatting

언급한 대로 로칼은 날짜, 숫자, 관련 문자열을 렌더링하는 모든 컴포넌트의 서식 Ignite UI for Angular 영향을 줍니다. 이전에는 Angular가 제공하는 로칼 데이터를 전 역 버전으로 가져와야 앱에서 사용할 수 있었습니다. 이제는 그렇지 않고, 기본적으로 로컬라이즈에 내장되어 있어 작동하기 위해 가져오거나 등록할 필요가 없습니다.

이 기능을 이제 막 도입하는 단계이기 때문에, Angular 방식은 여전히 사용 가능하며 이전과 마찬가지로 기본 방식입니다.

하지만 처음 시작하신다면, 메서드를 앱 설정에 추가provideIgniteIntl() 하기만 하면 됩니다. 그러면 Angular의 로칼 데이터를 가져와도 새 포맷을 사용할 수 있습니다:

export const appConfig: ApplicationConfig = {
    providers: [
        //...
        provideIgniteIntl()
    ]
};

날짜 형식

IgxGrid나 IgxDatePicker 같은 컴포넌트는 열별로 날짜 형식을 지정할 수 있게 해줍니다. 아래 목록들은 자신만의 맞춤 포맷을 설정하거나 만들 수 있는 옵션을 보여줍니다.

사용 가능한 사전 정의 형식 옵션:

옵션	~와 동등함	예시 (미국 지역 기준)
'short'	'M/d/yy, h:mm a'	6/15/15, 9:03 AM
'medium'	'음 d, y, h:mm:ss a'	Jun 15, 2015, 9:03:01 AM
'long'	'MMMM d, y, h:mm:ss a z'	2015년 6월 15일 오전 9:03:01 GMT+1
'full'	'EEEE, MMMM d, y, h:mm:ss a zzzz'	2015년 6월 15일 월요일 오전 9:03:01 GMT+01:00
'shortDate'	'M/d/yy'	6/15/15
'mediumDate'	'MMM d, y'	Jun 15, 2015
'longDate'	'MMMM d, y'	June 15, 2015
'fullDate'	'EEEE, MMMM d, y'	Monday, June 15, 2015
'shortTime'	'h:mm a'	9:03 AM
'mediumTime'	'h:mm:ss a'	9:03:01 AM
'longTime'	'h:mm:ss a z'	9:03:01 AM GMT+1
'fullTime'	'h:mm:ss a zzzz'	9:03:01 AM GMT+01:00

Custom format options:

Date field	값	설명	예
Weekday	c, cc, ccc, E, EE, EEE	평일 요약	Tue
	cccc, EEEE	평일 요약	화요일
	ccccc, EEEEE	평일의 좁은 버전	T
낮	d	숫자 표시(가능하면 한 자리 숫자)	1, 10
	dd	2-digit always (zero padded)	01, 10
월	M, L	숫자 표시(가능하면 한 자리 숫자)	8, 12
	MM, LL	2-digit always (zero padded)	08, 12
	MMM, LLL	짧은 달 이름	10월
	MMMM, LLLL	긴 달 이름	십월
	MMMMM, LLLLL	Narrow month name	영형
년도	y, yyy, yyyy	Numeric display	1, 24, 632, 2025
	yy	2자리 디스플레이 (가능하면 제로 패딩)	01, 24, 32, 25
ISO 8601 연도	Y, YYY, YYYY	Numeric display	1, 24, 632, 2025
	YY	2자리 디스플레이 (가능하면 제로 패딩)	01, 24, 32, 25
Era	G, GG, GGG	Short display	AD, BC
	GGGG	Long display	Anno Domini, Before Christ
	GGGGG	Narrow display	A, B
분	m	숫자 (가능하면 한 자리 숫자)	1, 5, 22
	mm	2-digit display (zero padded)	01, 05, 22
1~12시간	h	숫자 (가능하면 한 자리 숫자)	8, 12
	hh	2-digit (zero padded)	08, 13
Hour 0-23	H	숫자 (가능하면 한 자리 숫자)	8, 21
	HH	2-digit (zero padded)	08, 21
Hour 0-11	K	숫자 (가능하면 한 자리 숫자)	0, 11
	KK	2-digit (zero padded)	00, 11
두번째	s	숫자 (가능하면 한 자리 숫자)	0...59
	ss	2-digit (zero padded)	00...59
분수 초	S	Numeric for 1 digit	0...9
	SS	2자리 숫자	00...99
	SSS	3자리 숫자	000...999
기간(축약)	A, T	Lower case always	am, pm
	aa, aaa, tt, ttt	Upper case always	오전 오후
	aaaa, tttt	지역에 따른 사건	am, pm, AM, PM
	aaaaa, ttttt	Narrow lower case always	a, p
기간 - 연장	b, bb, bbb, B, BB, BBB	짧은 전시. 지역에 따라`Intl`	en-GB: at night
	bbbb, BBBB	긴 전시. 지역에 따라`Intl`	en-GB: at night
	bbbbb, BBBBB	좁은 전시. 지역에 따라`Intl`	en-GB: at night
시간대	z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO	Short display	GMT+4
	zzzz, ZZZZ, OOOO	Long display	GMT+0430

Localized resource strings

Ignite UI for Angular의 모든 컴포넌트는 기본적으로 영어로 렌더링되며, 상단에 나열된 언어 중 어느 것으로도 렌더링할 수 있습니다. 이를 전역적으로 구현하는 방법은 세 가지이며, 컴포넌트마다 한 가지 방법이 있습니다. 현재 사용 가능한 언어에 대해, API를 통해 제공되는 각 리소스 문자열에 대해 맞춤형 번역을 제공할 수 있습니다.

구성 요소 문자열의 번역은 리소스 문자열에 저장되며, 구성 요소가 이를 사용할 수 있도록 현지화 시스템에 등록해야 합니다.

이를 위해서는 먼저 모든 언어의 현지화된 리소스 문자열을 포함하는 패키지를igniteui-angular-i18n 설치해야 합니다:

npm install igniteui-angular-i18n --save-dev

그 후에는 학생들에게 제공하고자 하는 각 언어를 등록해야 합니다. 예를 들어 독일어와 일본어를 생각해봅시다:

import { IgxResourceStringsDE, IgxResourceStringsJA } from 'igniteui-angular-i18n';

registerI18n(IgxResourceStringsDE, 'de');
registerI18n(IgxResourceStringsJA, 'ja');

또한 해당 태그가 적용될 로컬 위치를 제공해야 합니다. 유효한 태그가 제공되지 않으면, 기본 'en-US' 로컬에 대한 리소스를 설정합니다.

지역과 문자

자원을 등록할 때 사용한 지역과 또는 또는 위치를 고려language + regionlanguage + script 하는데, 이 지역이 가장 일반적으로 사용됩니다. 이들은 보통 두 번째 또는 세 번째 위치에 위치하며 지역/스크립트로- 구분됩니다. 예를 들어,en-US 그리고en-GB 또는en-Latn

지역이나 스크립트를 사용하지 않으면, 등록한 리소스는 해당 언어를 사용하는en 모든 로케이션에 적용됩니다. 단, 지역과 스크립트에 대한 리소스를 정의하지 않는 한 말입니다. 그렇다면 정의하지 않은 리소스에 대해서만 리소스를en 반환합니다.

저희는 리소스 등록 시 스크립트가 지역보다 우선순위가 높습니다. 일반적으로 지역이나 스크립트 중 하나를 섞지 않고 동시에 사용하는 것을 권장합니다. 이렇게 하면 설정한 로케이션에 따라 어떤 것이 사용 가능하고 사용해야 하는지 관리하기 쉽고 알 수 있습니다.

어쨌든, 만약 두 언어를 모두 사용한다면, 예를 들어 언어의enGB region과Latn script를 생각해 봅시다. region과 scripten-GBen-Latn 모두에 대해 리소스를 정의하고, 나중에 local과 scripten-Latn-GB를 모두 로 설정하면, script 리소스를 먼저 가져갑니다. 만약 해당 리소스가 없다면, localeen-Latn를 명시적으로 설정하지 않는 한 사용 가능한 region을 반환합니다. 만약 어느 곳에도 등록된 리소스가 없다면, 사용 가능하다면 기본값en을 사용합니다.

Customize a component

앱 내에서 이미 등록된 리소스를 전역적으로 사용하되 다른 현지화를 적용하거나, 리소스 문자열을 완전히 교체하고 싶다면, 다음과 같이 할 수 있습니다.

Language and formatting

컴포넌트의 전역 현지화와 다르게 설정하고 싶다면, 속성locale 설정으로 할 수 있습니다. 이 경우 리소스 문자열의 언어와 서식에 영향을 미치는데, 이들은 서로 연결되어 있기 때문입니다.

이 방법을 사용하면 이미 사용 가능한 자원 문자열이 전역적으로 등록되어 있어야 합니다:

import { IgxResourceStringsJA } from 'igniteui-angular-i18n';

registerI18n(IgxResourceStringsJA, 'ja');

컴포넌트의 속성을 설정locale 하면 현재 사용 중인 글로벌 로컬을 덮어씁니다:

<igx-grid [data]="data" locale="ja">
    <igx-column field="ProductName" header="Product Name" [groupable]="true"></igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true"></igx-column>
</igx-grid>

언어만

로컬을 변경하지 않고 컴포넌트의 언어만 변경하고 싶다면, 각 컴포넌resourceStrings 트의 리소스 문자열을 설정해 전역적으로 사용하는 문자열을 덮어쓸 수도 있습니다:

<igx-grid [data]="data" [resourceStrings]="resourcesDE">
    <igx-column field="ProductName" header="Product Name" [groupable]="true"></igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true"></igx-column>
</igx-grid>

덮어쓰고자 하는 컴포넌트에 맞는 올바른 리소스 문자열 유형을 사용해야 합니다. 각 컴포넌트는 고유한 리소스 문자열 세트를 가지고 있습니다. 이 경우 독일어 그리드의 경우:

import { GridResourceStringsDE } from 'igniteui-angular-i18n';

// Inside App Component:
public resourcesDE = GridResourceStringsDE;

Custom localized resource strings

앱을 현지화하고 싶지만, 사용하는 언어에 맞는 리소스 문자열을 제공하지 않고 직접 번역을 제공하고 싶다면, 언제든지 커스텀 리소스 문자열을 제공하실 수 있습니다. 전역적으로나 컴포넌트별로 (속성resourceStrings 사용) 할 수 있습니다.

참고: 더 많은 언어가 포함된 패키지에igniteui-i18n-resources 자유롭게 기여해 주세요. 이 언어들은igniteui-angular-i18n 언어를 기반으로 합니다.

모든 컴포넌트에 제공된IResourceStrings 타입을 사용해 리소스 스팅의 타입을 얻을 수 있습니다:

import { IResourceStrings } from 'igniteui-angular';

export const customResourcesForAll: IResourceStrings = {
    //...
};
registerI18n(customResourcesForAll, 'custom');

또는 특정 부품에 대해, 이 경우 격자:

import { IGridResourceStrings } from 'igniteui-angular';

export const customGridResources: IGridResourceStrings = {
    grid_summary_count: 'गणना',
    grid_summary_min: 'न्यून',
    grid_summary_max: 'अधिक',
    grid_summary_sum: 'योग',
    grid_summary_average: 'औसत'
};

기본 영어 언어라도 기존 리소스 문자열과 커스터마이즈하고 싶은 문자열을 원하는 대로 섞을 수 있습니다:

import { IResourceStrings, CalendarResourceStringsEN, DatePickerResourceStringsEN } from 'igniteui-angular';

export const customResources: IResourceStrings = Object.assign(
    {},
    CalendarResourceStringsEN,
    DatePickerResourceStringsEN,
    {
        grid_summary_count: 'Custom count',
        grid_summary_min: 'Minium',
        grid_summary_max: 'Maximum',
        grid_summary_sum: 'Custom summary'
    }
);
registerI18n(customResources, 'en');

참고: 마지막 예시들은 특정 리소스 문자열만 설정합니다. 즉, 사용 중인 컴포넌트가 사용할 수 없는 경우, 나머지는 기본적으로 영어로 표시됩니다.

Available resource strings

Legacy Localization (i18n)

참고: 이 방법은 21.0.x까지 권장되었던 구식 현지화 방식입니다. 최신 버전을 사용 중이라면 위에 추가된 새로운 방식을 사용하는 것을 권장합니다. 이 방법은 추가 공지가 있을 때까지 여전히 유효합니다.

현재 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 자유롭게 기여해 주세요!

자체 지역화된 자원을 활용하세요

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

특정 컴포넌트 인스턴스에 맞는 특정 문자열을 로컬라이즈

단일 인스턴스만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

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

현지화(i18n)

현지화(i18n)

Angular Localization Example

Locale

Global API

lang attribute

Angular API

Per component

Formatting

날짜 형식

Localized resource strings

지역과 문자

Customize a component

Language and formatting

언어만

Custom localized resource strings

Available resource strings

Legacy Localization (i18n)

Angular Localization Example

Usage

Load localized resources from npm package

자체 지역화된 자원을 활용하세요

특정 컴포넌트 인스턴스에 맞는 특정 문자열을 로컬라이즈

Available resource strings

Additional Resources

테마

`lang` attribute