Localização (i18n)

    Atualmente, o Ignite UI for Angular é fornecido com cadeias de caracteres de recursos para os seguintes idiomas e scripts: 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). Eles estão disponíveis através do pacote, exceto para o igniteui-angular-i18n inglês, que vem como uma localização padrão em igniteui-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 no igniteui-angular-i18n pacote da seguinte forma:

    Instale o pacote executando npm install igniteui-angular-i18n --save-dev

    Importe as strings de recursos para o idioma desejado e altere as strings para uma instância de componente, usando a entrada do resourceStrings 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);
    }
}

    Como alternativa, você pode chamar a changei18n() 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";
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 o igniteui-angular-i18n pacote com mais idiomas!

    Utilize own localized resources

    changei18n espera um IResourceStrings objeto. Se o idioma que você deseja usar não estiver disponível no igniteui-angular-i18n pacote ou simplesmente quiser alterar uma cadeia de caracteres específica, você poderá passar um objeto personalizado contendo seus recursos de cadeia de caracteres para o idioma e os componentes necessários. Isso mudará o i18n global para os 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);
    }
}

    Como alternativa, você pode obter todas as cadeias de caracteres de recursos de componente disponíveis no momento. Há objetos para cada componente contendo strings localizáveis. Os valores podem ser substituídos para serem localizados e, em seguida, o objeto pode ser passado para a changei18n função, como um 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

    Se apenas uma única igx-grid instância deve ser localizada, há uma maneira. A resourceStrings propriedade deve ser usada e deve ser definida como uma nova instância do IGridResourceStrings 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.