javascript - Angular:如何在 Angular4 中启用多语言支持

Question

我有一个使用 angularJs(版本 4)构建的应用程序。我想让这个应用程序支持两种语言(法语和英语)。我查看了官方文档，但我很困惑，不知道该怎么做。任何人都可以提供翻译我的应用程序的简单步骤吗？提前致谢。

Answer 1

ngx-translate 包是一个很好的工具，可以帮助你实现你想要的。以下是如何一步一步地做到这一点:
首先安装 ngx-translate :

   npm install @ngx-translate/core --save

   npm install @ngx-translate/http-loader --save

定义你的语言文件:创建 en.json 文件，内容应如下所示:

{
  "TEXT":  "your text  in english here! ", // add many as you need !
}

对于带有法语翻译的 fr.json 文件也是如此

编辑您的 app.module.ts:

    import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
    import {TranslateHttpLoader} from "@ngx-translate/http-loader";

    export function HttpLoaderFactory(httpClient: HttpClient) {
        return new TranslateHttpLoader(httpClient, "i18n/", ".json");
    }

在@NgModule 装饰器导入中添加TranslateModule.forRoot()
使用翻译管道:
现在您应该可以像这样在模板中使用翻译管道了:

{{ 'TEXT' | translate }}

现在您需要授权用户更改语言。为此，您需要更改组件:添加这个导入:import {TranslateService} from '@ngx-translate/core';并更改构造函数:

constructor( private translate: TranslateService) {
        translate.addLangs(["en", "fr"]);
        translate.setDefaultLang('en');

        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }

你在你的 html 模板中添加这样的东西，以允许用户更改当前的语言:

<select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>

祝你好运!