如何在Angular中翻译页面?例如英语到阿拉伯语

Question

我正在使用@ngx翻译器，但我遇到了错误。我需要在页脚使用翻译器下拉列表，翻译器应该反映在所有页面中

Answer 1

像这样的服务。。它工作于

loadTranslations(...args: Locale[]): void {
const locales = [...args];
locales.forEach(locale => {


this.translate.setTranslation(locale.lang, locale.data, true);
this.langIds.push(locale.lang);
});
// add new languages to the list
this.translate.addLangs(this.langIds);
}

setLanguage(lang) {
if (lang) {
this.translate.use(this.translate.getDefaultLang());
this.translate.use(lang);
localStorage.setItem('language', lang);
}
}

getSelectedLanguage(): any {
return localStorage.getItem('language') || this.translate.getDefaultLang();
}

和构造函数

import { locale as arLang } from './i18n/ar';
import { locale as frLang } from './i18n/fr';
constructor(private translationService: TranslationService,
) {

// register translations
this.translationService.loadTranslations(arLang,  frLang);
}

Answer 2

对于应用程序的本地化/国际化，angular具有i18n。它处理应用程序的所有静态文本，并与您的任何语言环境进行翻译。为此，您需要在$Yourlocale.xlf文件中包含相等的翻译文本。

供参考：

翻译加法i18n

1. 在模板中添加

   • 添加i18n标签：<div i18n>Some text</div>

   • 将i18n-x标签添加到组件属性：

     • <some-component i18n-titleProp="title" titleProp="some text""></some-component>
     • <input i18n-placeholder="placeholder"" placeholder="some text""></input>
2. 在ts文件i18n polyfill中添加

   • 将i18n添加到类构造函数：constructor(private i18n: I18n) {}

   • 将i18n标记添加到变量值：

     • any = [this.i18n('first value'), this.i18n('second value')]
     • some = this.i18n('some value')
3. 创建XLIFF翻译文件
   • 运行npm run i18n
4. 参见翻译文件/locales/messages.xlf

   在这里，您需要手动输入等效的翻译文本进行翻译。