Localización (i18n)

    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!

    Utilize own localized resources

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

    Localize specific strings for a specific instance of a component

    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.