【问题标题】:How to manage text for different languages in Angular I18n如何在 Angular I18n 中管理不同语言的文本
【发布时间】:2018-05-07 18:41:32
【问题描述】:

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

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

【问题讨论】:

  • 如果使用 Angular CLI,只需使用类似 ng serve --aot --locale fr 的命令重新启动服务器,另外,here 是 Angular 当前支持的所有语言的链接

标签: angular internationalization angular-i18n


【解决方案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);
 });
}

【讨论】:

  • 感谢您的回答。所以从你所说的法语文本将需要在messages.fr.xlf中维护并对其进行版本控制?
  • 是的,您必须为每种语言创建一个文件,当您生成默认文件时,您可以复制并粘贴它并将其重命名为第二种语言并使用所需语言更改其内容,它可以工作非常适合我
  • 正如我所说,如果您想使用 aot build 部署您的应用程序,它将无法工作,请查看此stackoverflow.com/a/49990548/4399281 了解更多详细信息
猜你喜欢
  • 1970-01-01
  • 2011-04-30
  • 2015-07-10
  • 1970-01-01
  • 2016-05-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多