如何在 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);
 });
}