Localización (i18n)

Actualmente, Ignite UI for Angular incluye cadenas de recursos para los siguientes idiomas y escrituras: alemán, búlgaro, checo, danés, español, francés, holandés, húngaro, italiano, japonés, noruego, polaco, portugués, rumano, sueco. , turco, chino tradicional (zh-Hant) y chino simplificado (zh-Hans). Estos están disponibles a través del paquete igniteui-angular-i18n, excepto el inglés, que viene como localización predeterminada en igniteui-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.

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

Puede localizar una aplicación en uno de los idiomas disponibles en el paquete igniteui-angular-i18n de esta manera:

Instale el paquete ejecutando npm install igniteui-angular-i18n --save-dev

Importe las cadenas de recursos para el idioma deseado y cambie las cadenas para una instancia de componente, utilizando la entrada resourceStrings del 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, puede llamar a la función changei18n() pasando el objeto de 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";
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: ¡Siéntete libre de contribuir al paquete igniteui-angular-i18n con más idiomas!

Utilize own localized resources

La función changei18n espera un objeto IResourceStrings. Si el idioma que desea usar no está disponible en el paquete igniteui-angular-i18n, o simplemente desea cambiar una cadena en particular, puede pasar un objeto personalizado que contenga sus recursos de cadena para el idioma y los componentes que necesita. Esto cambiará el i18n global para los componentes igniteui-angular.

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

Alternativamente, puede obtener todas las cadenas de recursos de componentes disponibles actualmente. Hay objetos para cada componente que contienen cadenas localizables. Los valores se pueden reemplazar para localizarlos y luego el objeto se puede pasar a la función changei18n, como parámetro.

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

Si solo se debe localizar una única instancia igx-grid, hay una manera. Se debe utilizar la propiedad resourceStrings y se debe establecer en una nueva instancia del tipo 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

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