如何在Angular I18n中管理不同语言的文本

Question

基于此处的原始文档https://angular.io/guide/i18n 。 src / app / app.component.html仅包含英文文本。 messages.fr.xlf是具有法语文本的文件，但它是自动生成的，建议不要触摸它。

如果我想用法语文本而不是英语来呈现app.component.html，我应该在哪里指定法语消息“ Bonjour”等？

Answer 1

您必须在i18n-providers.ts中设置默认语言，这是一个示例，如果您的默认语言是法语（fr），则可以为其指定默认翻译文件messages.xlf和

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

对于其他语言，请记住，如果您使用aot进行构建，则i18n将不起作用

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