Localização (i18n)

Nota: A partir da versão 21.1.0, essa é a forma recomendada de aplicar localização aos componentes Ignite UI for Angular.

Com nossa nova localização, introduzimos mais recursos com menos requisitos tanto para nossas strings de localização quanto para formatação de todas as localidades disponíveis. A formatação agora é baseada nos padrões introduzidos pelaIntl API.

Atualmente, Ignite UI for Angular vem com cadeias de recursos para os seguintes idiomas:Bulgarian,Czech,Danish,Dutch,EnglishFrenchGermanHungarianItalianJapaneseKoreanNorwegianPolishPortugueseRomanianSpanishSwedishTurkishTraditional Chinese (zh-Hant) eSimplified Chinese (zh-Hans). Estes estão disponíveis via pacoteigniteui-angular-i18n, exceto o inglês, que vem como localização padrão em.igniteui-angular

Angular Localization Example

Nota: O hindi (HI) incluído no exemplo é apenas para fins ilustrativos e para enfatizar a possibilidade de passar um objeto de localização personalizado. Neste exemplo, contém apenas algumas strings localizadas para o resumo. Mais detalhes na seção de Fontes de recursos localizadas personalizadas abaixo.

Locale

Por localidade, nos referiremos às strings gerais que definem as diferentes línguas e regiões da Terra. No nosso caso, elas são baseadas na definição da etiqueta BCP 47 e a maioria das básicas está descrita no Registro de Subtags de Idiomas da IANA; para uma lista de idiomas, você também pode 'consultar o padrão de linguagem ISO 639'.

Isso afeta tanto a formatação das datas e números quanto as strings de recursos localizadas que nossos componentes usam. A localização padrão para os componentes Ignite UI for Angular éen-US.

Existem várias maneiras de definir a localidade. Seja globalmente ou por componente.

Global API

Você pode definir a localização que será usada globalmente usando osetCurrentI18n método que vem doigniteui-angular pacote. Isso afetará tanto a formatação quanto as cadeias de recursos registradas usadas em todos os nossos componentes. Para mais informações sobre cadeias de recursos, veja Cadeias de recursos localizadas

setCurrentI18n('de');

Suportamos toda a gama de locais possíveis suportados porIntl. Se você fornecer um local que não é válido ou suportado, ele usará o local padrãoen-US por enquanto, até que você o transforme em válido.

Em geral, você deve registrar seus recursos nos idiomas, regiões e escritas das tags que pretende usar, para que seus componentes também sejam localizados. Para mais informações, veja a seção Regiões e Scripts.

`lang` attribute

Com essa abordagem, temos a capacidade de definir a localização através dolang atributo global daHTML tag. Esse atributo está sendo observado e, se for alterado, todos os componentes renderizados atualizarão suas strings de recursos para a linguagem atualmente definida. Todas as regras relativas à tag usada se aplicam conforme descrito acima.

Nota: Isso funciona apenas na raiz e não funciona para elementos internos na página.

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

Angular API

Você também pode usar Angular token LOCALE_ID embutido para definir a localização de toda a aplicação. A tag fornecida funcionará da mesma forma para nossos componentes em comparação com o que nossa API gerencia.

Per component

Cada componente também terá sua próprialocale propriedade, que você pode especificar e então não será afetada pela localização global.

<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

A localização como mencionado afeta a formatação em todos os componentes Ignite UI for Angular que renderizam datas, números e algumas strings relacionadas a eles. Antes, você precisava importar as variantes globais dos dados de local da Angular para poder usá-los no seu app. Isso não é mais o caso e isso vem integrado à nossa localização por padrão, então você não precisará importar e registrar nada para funcionar.

Como estamos apenas introduzindo esse recurso, o método do Angular ainda está disponível e funciona como antes, sendo o padrão se você já estiver usando.

Se você está começando agora, só precisará adicionar oprovideIgniteIntl() método à configuração do seu app, o que garantirá que você use a nova formatação, mesmo que tenha importado os dados locais do Angular:

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

Formatos de datas

Componentes como o IgxGrid ou o IgxDatePicker permitem especificar o formato de data (para a grade por coluna). As listas abaixo mostram as opções disponíveis que você pode definir ou construir seu próprio formato personalizado.

Opções de formato pré-definidas disponíveis:

Opção	Equivalente a	Exemplos (fornecidos na região dos EUA)
'short'	'M/d/yy, h:mm a'	6/15/15, 9:03 AM
'medium'	'MMM d, y, h:mm:ss a'	Jun 15, 2015, 9:03:01 AM
'long'	'MMMM d, y, h:mm:ss a z'	15 de junho de 2015 às 9:03:01 GMT+1
'full'	'EEEE, MMMM d, y, h:mm:ss a zzzz'	Segunda-feira, 15 de junho de 2015 às 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	Valor	Descrição	Exemplo
Weekday	c, cc, ccc, E, EE, EEE	Versão curta do dia da semana	Tue
	cccc, EEEE	Versão longa do dia de semana	Terça-feira
	ccccc, EEEEE	Versão restrita do dia de semana	T
Dia	d	Exibição numérica (dígito único quando possível)	1, 10
	dd	2-digit always (zero padded)	01, 10
Mês	M, L	Exibição numérica (dígito único quando possível)	8, 12
	MM, LL	2-digit always (zero padded)	08, 12
	MMM, LLL	Nome do mês curto	Outubro
	MMMM, LLLL	Nome do mês longo	outubro
	MMMMM, LLLLL	Narrow month name	O
Ano	y, yyy, yyyy	Numeric display	1, 24, 632, 2025
	yy	Display de 2 dígitos (zero acolchoado quando possível)	01, 24, 32, 25
ISO 8601 ano	Y, YYY, YYYY	Numeric display	1, 24, 632, 2025
	YY	Display de 2 dígitos (zero acolchoado quando possível)	01, 24, 32, 25
Era	G, GG, GGG	Short display	AD, BC
	GGGG	Long display	Anno Domini, Before Christ
	GGGGG	Narrow display	A, B
Minuto	m	Numérico (de um dígito quando possível)	1, 5, 22
	mm	2-digit display (zero padded)	01, 05, 22
Hora 1-12	h	Numérico (de um dígito quando possível)	8, 12
	hh	2-digit (zero padded)	08, 13
Hour 0-23	H	Numérico (de um dígito quando possível)	8, 21
	HH	2-digit (zero padded)	08, 21
Hour 0-11	K	Numérico (de um dígito quando possível)	0, 11
	KK	2-digit (zero padded)	00, 11
Segundo	s	Numérico (de um dígito quando possível)	0...59
	ss	2-digit (zero padded)	00...59
Segundos fracionários	S	Numeric for 1 digit	0...9
	SS	Numérico para 2 dígitos	00...99
	SSS	Numérico para 3 dígitos	000...999
Período de tempo - abreviado	A, T	Lower case always	am, pm
	aa, aaa, tt, ttt	Upper case always	AM, PM
	aaaa, tttt	Caso baseado na localidade	am, pm, AM, PM
	aaaaa, ttttt	Narrow lower case always	a, p
Período de tempo - estendido	b, bb, bbb, B, BB, BBB	Exposição curta. Baseado na`Intl` localidade	en-GB: at night
	bbbb, BBBB	Exibição longa. Baseado na`Intl` localização	en-GB: at night
	bbbbb, BBBBB	Exibição estreita. Baseada na`Intl` localidade	en-GB: at night
Fuso horário	z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO	Short display	GMT+4
	zzzz, ZZZZ, OOOO	Long display	GMT+0430

Localized resource strings

Todos os componentes em Ignite UI for Angular renderizam em inglês por padrão e podem ser renderizados em qualquer um dos idiomas listados no topo também. Existem três maneiras de conseguir isso globalmente e uma forma por componente. Para qualquer idioma que não esteja disponível atualmente, uma tradução personalizada pode ser fornecida para cada string de recurso disponível através da nossa API.

As translações das cadeias de componentes são armazenadas em cadeias de recursos e precisarão ser registradas em nosso sistema de localização para que o componente possa usá-las.

Para isso, você primeiro precisa instalar oigniteui-angular-i18n pacote, que contém as strings de recursos localizadas para todos os idiomas:

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

Depois disso, você precisará registrar cada idioma que gostaria que tivesse disponível para eles. Vamos supor alemão e japonês:

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

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

Você também precisará informar para qual localidade elas se candidatarão. Se não for fornecida uma tag válida, ela definirá os recursos para a localidade padrão 'en-US'.

Regiões e escritas

Levamos em conta olanguage + region oulanguage + script do local que você usou para registrar seus recursos, já que esses são os mais comumente usados. Eles são separados por- e região/script geralmente são definidos em uma segunda ou terceira posição. Por exemplo,en-US een-GB ouen-Latn.

Se você não usar região ou alfabeto, os recursos que você registrar se aplicarão a todos os locais que usam aen língua, por exemplo. A menos que você defina recursos para as regiões e scripts também. Nesse caso, só para aqueles que você não definiu, retornarão os recursosen.

Para nós, o script tem prioridade maior do que a região ao registrar recursos. Recomendamos, em geral, usar qualquer região ou script, sem misturá-los e usar ambos ao mesmo tempo. Assim, fica mais fácil gerenciar e saber qual deles você tem disponível e deve ser usado, com base na localização que você definir.

De qualquer forma, se você usar ambos, vamos pegar por exemplo aen linguagem comGB região eLatn alfabeto. Se você definir recursos tanto para região quanto para script comoen-GB een-Latn, e depois definir sua localidade, tendo região e script tambémen-Latn-GB, pegaremos os recursos do script primeiro. Se não estiver disponível, então retornaremos a região disponível, a menos que você defina explicitamente sua localização paraen-Latn, claro. Se você não tiver recursos registrados para nenhum deles, escolheremos o padrão paraen se estiver disponível.

Customize a component

Se você quiser que um componente específico no seu app use os recursos já registrados globalmente, mas com localização diferente, ou substitua completamente as strings de recursos dele, pode fazer isso da seguinte forma.

Language and formatting

Se você quiser definir uma localização diferente da global para um componente, pode fazer isso definindo alocale propriedade. Isso afetará a linguagem das strings de recurso usadas, assim como a formatação, já que elas estão conectadas.

Com essa abordagem, você já deve ter as strings de recursos disponíveis registradas globalmente:

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

registerI18n(IgxResourceStringsJA, 'ja');

Ao definir alocale propriedade do componente, isso substituirá a localização global atualmente em uso:

<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>

Apenas idioma

Se você quiser mudar apenas a linguagem do componente, sem alterar a localidade, pode até definir as strings de recursos de cada componente usando aresourceStrings propriedade, que substituirá as usadas globalmente:

<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>

Você precisará garantir que usa o tipo correto de cadeia de recursos para o componente com o qual deseja sobreescrevê-lo. Cada componente tem seu próprio conjunto de cadeias de recursos. Neste caso, para a grade em alemão:

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

// Inside App Component:
public resourcesDE = GridResourceStringsDE;

Custom localized resource strings

Se você quiser localizar seu app, mas não fornecemos strings de recursos para o idioma que você usa e quiser fornecer sua própria tradução, você sempre pode fornecer uma string de recursos personalizada. Você pode fazer isso globalmente ou por componente (usando aresourceStrings característica).

Nota: Sinta-se à vontade para contribuir com mais idiomas noigniteui-i18n-resources pacote. Elesigniteui-angular-i18n são baseados neles.

Você pode usar o tipo fornecidoIResourceStrings para todos os componentes para obter tipos para os recursos usados em stings:

import { IResourceStrings } from 'igniteui-angular';

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

Ou, para um componente específico separadamente, neste caso as grades:

import { IGridResourceStrings } from 'igniteui-angular';

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

Você pode até misturar como quiser as strings de recursos já existentes com as que deseja personalizar, mesmo para o idioma padrão em inglês:

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

Nota: Os últimos exemplos definem apenas cadeias de recursos específicas. Isso significa que o restante será padrão para o inglês, caso não estejam disponíveis para os componentes em uso receberem.

Available resource strings

Legacy Localization (i18n)

Nota: Esta é uma forma antiga de lidar com localização que era recomendada até a versão 21.0.x. Sugerimos usar a nova opção disponível acima se você estiver usando versões mais recentes. Isso ainda funcionará até novo aviso.

Atualmente, Ignite UI for Angular envia com cadeias de recursos para os seguintes idiomas e escritos: búlgaro, tcheco, dinamarquês, holandês, inglês, francês, alemão, húngaro, italiano, japonês, coreano, norueguês, polonês, português, romeno, espanhol, sueco, turco, chinês tradicional (zh-hant) e chinês simplificado (zh-hans). Esses estão disponíveis via pacoteigniteui-angular-i18n, exceto o inglês, que vem como localização padrão emigniteui-angular.

Com apenas algumas linhas de código, os usuários podem alterar facilmente as strings de localização em Ignite UI for Angular componentes.

Angular Localization Example

Observação: o hindi (HI) incluído no exemplo é apenas para fins ilustrativos e para enfatizar a possibilidade de passar um objeto de localização personalizado. Neste exemplo, ele contém apenas várias cadeias de caracteres localizadas para o resumo. Mais detalhes na seção Utilizar recursos próprios localizados abaixo.

Usage

Load localized resources from npm package

Você pode localizar um aplicativo em um dos idiomas disponíveis noigniteui-angular-i18n pacote assim:

Instale o pacote executandonpm install igniteui-angular-i18n --save-dev

Importe as strings de recursos para a linguagem desejada e altere as strings para uma instância de componente, usando a entrada doresourceStrings componente.

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

Alternativamente, você pode chamar achangei18n() função que passa o objeto de recurso correspondente para alterar a localização de todos os componentes.

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

Nota: Sinta-se à vontade para contribuir com mais idiomas noigniteui-angular-i18n pacote!

Utilize os próprios recursos localizados

changei18nfunção espera umIResourceStrings objeto. Se a linguagem que você deseja usar não estiver disponível noigniteui-angular-i18n pacote, ou simplesmente quiser mudar uma string específica, você pode passar um objeto personalizado contendo seus recursos de string para a linguagem e os componentes necessários. Isso alterará o i18n global para os componentes igniteui-angulares.

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

Alternativamente, você pode obter todas as cadeias de recursos componentes atualmente disponíveis. Existem objetos para cada componente contendo strings localizáveis. Os valores podiam ser substituídos para serem localizados e então o objeto podia ser passado para achangei18n função, como um parâmetro.

// 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 strings específicas para uma instância específica de um componente

Se apenas umaigx-grid única instância for localizada, há uma maneira. AresourceStrings propriedade deve ser usada e definida para uma nova instância deIGridResourceStrings tipo.

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

this.grid.resourceStrings = newGridRes;

Available resource strings

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Localização (i18n)