Localização (i18n)

    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 own localized resources

    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 specific strings for a specific instance of a component

    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.