如何在Angular中翻译页面？例如英语到阿拉伯语 翻译加法i18n

问题描述

Am using @ngx translator but I'm getting error. I need to use translator dropdown at footer and the translator should reflect in all pages

解决方法

像这样的服务..它有效

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

,

对于您的应用程序的本地化/国际化，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

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