Localización (i18n)

Nota: Desde la versión 21.1.0, esta es la forma recomendada de aplicar la localización a los componentes Ignite UI for Angular.

Con nuestra nueva localización introducimos más funcionalidades con menos requisitos tanto para nuestras cadenas de localización como para el formato de todas las localizaciones disponibles. El formato ahora se basa en los estándares introducidos por laIntl API.

Actualmente, Ignite UI for Angular se envía con cadenas de recursos para los siguientes idiomas:Bulgarian,Czech,Danish,DutchEnglish,FrenchGermanHungarianItalianJapaneseKoreanNorwegianPolishPortugueseRomanianSpanishSwedishTurkishTraditional Chinese (zh-Hant) ySimplified Chinese (zh-Hans). Estas están disponibles a través deligniteui-angular-i18n paquete, excepto en inglés, que viene como localización predeterminada en.igniteui-angular

Angular Localization Example

Nota: El hindi (HI) incluido en la muestra es solo con fines ilustrativos y para enfatizar la posibilidad de pasar un objeto de localización personalizado. En esta muestra, contiene solo varias cadenas localizadas para el resumen. Más detalles en la sección de cadenas de recursos localizadas personalizadas más abajo.

Locale

Por localidad, nos referiremos a las cadenas generales que definen los diferentes idiomas y regiones de la Tierra. En nuestro caso, se basan en la definición de etiquetas BCP 47 y la mayoría de las básicas están descritas en el Registro de Subetiquetas de Idiomas de la IANA; para una lista de idiomas también puedes 'consultar el estándar de idiomas ISO 639'.

Afecta tanto al formato de las fechas y números como a las cadenas de recursos localizadas que usan nuestros componentes. La ubicación predeterminada para los componentes de Ignite UI for Angular esen-US.

Hay varias formas de configurar la localización. Ya sea globalmente o por componente.

Global API

Puedes establecer la localización que se usará globalmente usando elsetCurrentI18n método que proviene deligniteui-angular paquete. Esto afectará tanto al formato como a las cadenas de recursos registradas usadas en todos nuestros componentes. Para más información sobre cadenas de recursos, véase Cadenas de recursos localizadas

setCurrentI18n('de');

Somos compatibles con toda la gama de posibles ubicaciones queIntl soporta. Si proporcionas una ubicación que no es válida o no está soportada, usará la ubicación predeterminadaen-US por el momento, hasta que la cambies por una válida.

En general, deberías registrar tus recursos bajo los idiomas, regiones y escrituras de las etiquetas que planeas usar, para que tus componentes también estén localizados. Para más información, véase la sección Regiones y Guiones.

`lang` attribute

Con este enfoque tenemos la capacidad de establecer la localización a través dellang atributo global de laHTML etiqueta. Este atributo está siendo monitorizado y, si se modifica, todos los componentes renderizados actualizarán sus cadenas de recursos al lenguaje actualmente establecido. Todas las reglas relacionadas con la etiqueta utilizada se aplican como se ha descrito anteriormente.

Nota: Esto solo funciona a nivel raíz y no funciona para los elementos internos de la página.

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

Angular API

También puedes usar Angular token de LOCALE_ID incorporado para establecer la localización de toda la aplicación. La etiqueta proporcionada funcionará igual para nuestros componentes que para cómo maneja nuestra API.

Per component

Cada componente también tendrá su propialocale propiedad, que puedes especificar y entonces no se verá afectado por la localización 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

La localización, como se mencionó, afecta al formato en todos los componentes Ignite UI for Angular que muestran fechas, números y algunas cadenas relacionadas. Antes tenías que importar las variantes globales de los datos de localidades que proporcionan Angular para poder usarlos en tu app. Esto ya no es así y esto viene integrado en nuestra localización por defecto, así que no necesitarás importar ni registrar nada para que funcione.

Como acabamos de introducir esta función, la forma de Angular sigue disponible y funciona igual que antes, y sigue siendo la predeterminada si ya la usas.

Pero si acabas de empezar, solo tendrás que añadir elprovideIgniteIntl() método a la configuración de tu app, lo que asegurará que usas el nuevo formato, incluso si tienes importados los datos locales de Angular:

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

Formatos de fechas

Componentes como IgxGrid o IgxDatePicker permiten especificar el formato de fecha (para la cuadrícula por columna). Las listas que aparecen a continuación muestran las opciones disponibles que puedes configurar o construir tu propio formato personalizado.

Opciones de formato predefinidas disponibles:

Opción	Equivalente a	Ejemplos (dados en la localidad de EE. UU.)
'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 junio de 2015 a las 9:03:01 GMT+1
'full'	'EEEE, MMMM d, y, h:mm:ss a zzzz'	Lunes, 15 de junio de 2015 a las 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	Descripción	Ejemplo
Weekday	c, cc, ccc, E, EE, EEE	Versión corta del día laborable	Tue
	cccc, EEEE	Versión larga del día laborable	Martes
	ccccc, EEEEE	Versión limitada del día laborable	T
Día	d	Visualización numérica (de un solo dígito cuando es posible)	1, 10
	dd	2-digit always (zero padded)	01, 10
Mes	M, L	Visualización numérica (de un solo dígito cuando es posible)	8, 12
	MM, LL	2-digit always (zero padded)	08, 12
	MMM, LLL	Nombre corto del mes	Oct
	MMMM, LLLL	Nombre del mes largo	Octubre
	MMMMM, LLLLL	Narrow month name	O
Año	y, yyy, yyyy	Numeric display	1, 24, 632, 2025
	yy	Pantalla de 2 dígitos (cero acolchado cuando es posible)	01, 24, 32, 25
ISO 8601 año	Y, YYY, YYYY	Numeric display	1, 24, 632, 2025
	YY	Pantalla de 2 dígitos (cero acolchado cuando es posible)	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 un solo dígito cuando es posible)	1, 5, 22
	mm	2-digit display (zero padded)	01, 05, 22
Hora 1-12	h	Numérico (de un solo dígito cuando es posible)	8, 12
	hh	2-digit (zero padded)	08, 13
Hour 0-23	H	Numérico (de un solo dígito cuando es posible)	8, 21
	HH	2-digit (zero padded)	08, 21
Hour 0-11	K	Numérico (de un solo dígito cuando es posible)	0, 11
	KK	2-digit (zero padded)	00, 11
Segundo	s	Numérico (de un solo dígito cuando es posible)	0...59
	ss	2-digit (zero padded)	00...59
Segundos fraccionados	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
Periodo de tiempo - abreviado	a, t	Lower case always	am, pm
	aa, aaa, tt, ttt	Upper case always	AM PM
	aaaa, tttt	Caso basado en la ubicación	am, pm, AM, PM
	aaaaa, ttttt	Narrow lower case always	a, p
Periodo de tiempo - ampliado	b, bb, bbb, B, BB, BBB	Exposición corta. Según`Intl` la localidad	en-GB: at night
	bbbb, BBBB	Exposición larga. Según`Intl` la ubicación	en-GB: at night
	bbbbb, BBBBB	Pantalla estrecha. Según`Intl` la localidad	en-GB: at night
Zona horaria	z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO	Short display	GMT+4
	zzzz, ZZZZ, OOOO	Long display	GMT+0430

Localized resource strings

Todos los componentes de Ignite UI for Angular se renderizan en inglés por defecto y también pueden renderizarse en cualquiera de los idiomas listados arriba. Hay tres formas de lograrlo globalmente y una por componente. Para cualquier idioma que no esté disponible actualmente, se puede proporcionar traducción personalizada para cada cadena de recursos disponible a través de nuestra API.

Las traducciones de las cadenas de componentes se almacenan en cadenas de recursos y deberán registrarse en nuestro sistema de localización para que el componente pueda usarlas.

Para lograrlo, primero necesitas instalar eligniteui-angular-i18n paquete, que contiene las cadenas de recursos localizadas para todos los idiomas:

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

Después de eso, tendrás que registrar cada idioma que quieras tener disponible. Digamos alemán y japonés:

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

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

También tendrás que proporcionar a qué localidad se solicitarán. Si no se proporciona una etiqueta válida, se establecerán los recursos para la localidad predeterminada 'en-US'.

Regiones y escrituras

Tenemos en cuenta ellanguage + region olanguage + script desde la localidad que usaste para registrar tus recursos, ya que estos son los más comúnmente utilizados. Están separados por- una región/escritura que normalmente se define en una segunda o tercera posición. Por ejemplo,en-US yen-GB oen-Latn.

Si no usas regiones o escrituras, los recursos que registres se aplicarán a todos los lugares que usen elen idioma, por ejemplo. Eso es a menos que definas también los recursos para las regiones y los scripts. Entonces, solo para aquellos que no has definido, en este caso devolverán los recursosen para ellos.

Para nosotros, el script tiene mayor prioridad que la región al registrar recursos. En general, recomendamos usar una región o un script, sin mezclarlos y usar ambos a la vez. Así es más fácil gestionar y saber cuál tienes disponible y cuál deberías usar, según la localización que establezcas.

En fin, si por casualidad usas ambos, tomemos por ejemplo elen idioma conGB región yLatn script. Si defines recursos tanto para región como script comoen-GB anden-Latn, y más adelante configuras tu localización, teniendo tanto región como script a,en-Latn-GB tomaremos primero los recursos del script. Si no está disponible, entonces devolveremos la región disponible, a menos que establezcas explícitamente tu localidad aen-Latn, por supuesto. Si no tienes recursos registrados para ninguno, tomaremos el valor predeterminado sien está disponible.

Customize a component

Si quieres que un componente específico en tu app use los recursos ya registrados globalmente pero con una localización diferente o que reemplace completamente las cadenas de recursos, puedes hacerlo de la siguiente manera.

Language and formatting

Si quieres configurar una localización diferente a la global para un componente, puedes hacerlo estableciendo lalocale propiedad. Esto afectará al idioma de las cadenas de recursos usadas así como al formato, ya que están vinculados.

Con este enfoque ya deberías tener las cadenas de recursos disponibles registradas globalmente:

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

registerI18n(IgxResourceStringsJA, 'ja');

Al establecer lalocale propiedad del componente, esto anulará la localidad global actualmente en 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>

Solo idioma

Si quieres cambiar solo el lenguaje del componente, sin cambiar la localización, incluso puedes establecer las cadenas de recursos de cada componente usando laresourceStrings propiedad, que anulará las que se usan 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>

Tendrás que asegurarte de usar el tipo correcto de cadena de recursos para el componente con el que quieres sobrescribirlo. Cada componente tiene su propio conjunto de cadenas de recursos. En este caso, para la cuadrícula en alemán:

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

// Inside App Component:
public resourcesDE = GridResourceStringsDE;

Custom localized resource strings

Si quieres localizar tu app, pero no proporcionamos cadenas de recursos para el idioma que usas y quieres ofrecer tu propia traducción, siempre puedes proporcionar una cadena de recursos personalizada. Puedes hacerlo globalmente o por componente (usando laresourceStrings propiedad).

Nota: No dudes en contribuir aligniteui-i18n-resources paquete con más idiomas. Estánigniteui-angular-i18n basados en ellos.

Puedes usar el tipo proporcionadoIResourceStrings para todos los componentes y obtener tipos para los recursos stings utilizados:

import { IResourceStrings } from 'igniteui-angular';

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

O para un componente específico por separado, en este caso las cuadrículas:

import { IGridResourceStrings } from 'igniteui-angular';

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

Incluso puedes mezclar como quieras las cadenas de recursos ya existentes con las que quieras personalizar, incluso para el idioma inglés por defecto:

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: Los últimos ejemplos solo establecen cadenas de recursos específicas. Esto significa que el resto se apoderará por defecto del inglés si no están disponibles para que los componentes en uso los obtengan.

Available resource strings

Legacy Localization (i18n)

Nota: Esta es una forma antigua de gestionar la localización que se recomendaba hasta la versión 21.0.x. Sugerimos usar la nueva opción disponible anterior si usas versiones más recientes. Esto seguirá funcionando hasta nuevo aviso.

Actualmente, Ignite UI for Angular se lanza con cadenas de recursos para los siguientes idiomas y escrituras: búlgaro, checo, danés, neerlandés, inglés, francés, alemán, húngaro, italiano, japonés, coreano, noruego, polaco, portugués, rumano, español, sueco, turco, chino tradicional (zh-hant) y chino simplificado (zh-hans). Estos están disponibles a través deligniteui-angular-i18n paquete, excepto en inglés, que viene como localización predeterminada enigniteui-angular.

Con solo unas pocas líneas de código, los usuarios pueden cambiar fácilmente las cadenas de localización en Ignite UI for Angular componentes.

Angular Localization Example

Nota: El hindi (HI) incluido en el ejemplo tiene solo fines ilustrativos y para enfatizar la posibilidad de pasar un objeto de localización personalizado. En este ejemplo, contiene solo varias cadenas localizadas para el resumen. Más detalles en la sección Utilizar recursos propios localizados a continuación.

Usage

Load localized resources from npm package

Puedes localizar una aplicación en uno de los idiomas disponibles en eligniteui-angular-i18n paquete así:

Instala el paquete ejecutandonpm install igniteui-angular-i18n --save-dev

Importa las cadenas de recursos para el lenguaje deseado y cambia las cadenas para una instancia de componente, usando la entrada delresourceStrings 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, puedes llamar a lachangei18n() función que pasa el objeto recurso correspondiente para cambiar la localización de todos los 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: ¡No dudes en contribuir aligniteui-angular-i18n paquete con más idiomas!

Utilizar recursos localizados propios

changei18nla función espera unIResourceStrings objeto. Si el lenguaje que quieres usar no está disponible en eligniteui-angular-i18n paquete, o simplemente quieres cambiar una cadena concreta, puedes pasar un objeto personalizado que contenga tus recursos de cadenas para el lenguaje y los componentes que necesitas. Esto cambiará el i18n global para los 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, puedes obtener todas las cadenas de recursos componentes disponibles actualmente. Hay objetos para cada componente que contienen cadenas localizables. Los valores podían reemplazarse para localizarse y luego el objeto podía pasarse a lachangei18n función, como 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);
    }
}

Localiza cadenas específicas para una instancia concreta de un componente

Si soloigx-grid una instancia debe ser localizada, hay una manera. LaresourceStrings propiedad debe usarse y establecerse en una nueva instancia 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

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Localización (i18n)