Как работать с текстом на разных языках в Angular I18n - PullRequest
Новая
       40

Как работать с текстом на разных языках в Angular I18n

0 голосов
/ 07 мая 2018

На основе оригинальной документации здесь https://angular.io/guide/i18n. src / app / app.component.html будет иметь только текст на английском языке. messages.fr.xlf - файл с французским текстом, но он генерируется автоматически и не рекомендуется к нему прикасаться.

Если я хочу, чтобы app.component.html отображался с использованием французского текста вместо английского, где бы я указывал французские сообщения "Bonjour" и т. Д.?

1 Ответ

0 голосов
/ 07 мая 2018

вы должны установить язык по умолчанию в вашем i18n-provider.ts, вот пример, если ваш язык по умолчанию французский (fr), вы можете предоставить ему файл перевода по умолчанию messages.xlf и 

 ./locale/messages.${locale}.xlf

для других языков, и имейте в виду, что i18n не будет работать, если вы строите с использованием aot 

  import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

 export function getTranslationProviders(): Promise<Object[]> {
 let locale = 'fr'; //set it here
 if (localStorage.getItem('Language') !== undefined) {
     locale = localStorage.getItem('Language');
 }

 // return no providers if fail to get translation file for locale
 const noProviders: Object[] = [];

 // No locale or U.S. English: no translation providers
 if (!locale || locale === 'fr') {
     return Promise.resolve(noProviders);
 }

 let translationFile = `./locale/messages.${locale}.xlf`;

 if (locale === 'fr') {
    translationFile = './messages.xlf';
 }

 return loadTranslationFile(translationFile)
    .then( (translations: string ) => [
        { provide: TRANSLATIONS, useValue: translations },
        { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
        { provide: LOCALE_ID, useValue: locale }
    ])
    .catch(() => noProviders); // ignore if file not found
 }

 function loadTranslationFile(file) {
  return new Promise(function (resolve, reject) {
    const   xhr: XMLHttpRequest = new XMLHttpRequest();
    xhr.open('GET', file, false);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 0) {
                resolve(xhr.responseText);
            } else {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText
                });
            }
        } else {
            reject({
                status: xhr.status,
                statusText: xhr.statusText
            });                }
    };
    xhr.onerror = function () {
        reject({
            status: xhr.status,
            statusText: xhr.statusText
        });
    };
    xhr.send(null);
 });
}
...