Angular 8 中的国际化以翻译整个应用程序答案

【问题标题】：Internationalization in angular 8 to translate whole applicationAngular 8 中的国际化以翻译整个应用程序
【发布时间】：2020-08-15 22:52:39
【问题描述】：

我想用选定的语言翻译我的整个应用程序。我有一个使用 i18n 进行翻译的示例。但我不明白如何在我的应用程序中实现它。

【问题讨论】：

我认为这不是找到问题帮助的正确位置，因为 StackOverflow 专门用于获取编码问题的答案。如果您编写了一些遇到问题的代码，那么您可以发布代码并解释您遇到的具体问题。否则，您最好在线搜索有关 Angular 8 国际化的更多信息。

标签： javascript angular typescript internationalization translate

【解决方案1】：

您只需按照我的一些说明进行操作即可更好地理解。

在您的应用程序中安装 ngx-translate npm 包。

npm i @ngx-translate/core --save

现在你需要安装 http-loader

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

现在将此代码粘贴到您的 AppModule.ts 文件中

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
          useFactory: myHttpLoader, 
          deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})

export function myHttpLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

在 /assets/i18n/ 文件夹中创建语言（如印地语、英语等）的翻译文件。

  //1. first file name: en.json
  { 
    "Title":"Welcome"
  }

  //2. second file name: hi.json
  {
    "Title":"स्वागत हे"
  }

//Note: you can use google translate to convert into any language.

在您的组件 ts 文件中导入翻译服务。

import {TranslateService} from '@ngx-translate/core';

export class AppComponent {
  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'hi'])
    translate.setDefaultLang('en');
    translate.use('en');
  }

  //if user on change language
  switchLanguage(language: string) {
    this.translate.use(language);
  }
}

在 html 文件中

  <p translate>Title</p>

  <button (click)="switchLanguage('en')">English</button>

  <button (click)="switchLanguage('hi')">Hindi</button>

继续编码。享受吧！

希望对你有帮助。 :)

【讨论】：

感谢您以最简单的方式解释。

【解决方案2】：

在 Angular 版本 8 中，我建议您使用 ngx-translate 包。它具有比 Angular 8 版更多的功能，而且实现起来非常简单。据我所知，它是由一名团队成员开发的，用于弥补 i18 的局限性。

npm install @ngx-translate/core --save

安装非常简单：https://github.com/ngx-translate/core/blob/master/README.md#installation

它依赖.json 文件作为键值对来存储/访问翻译后的值。

如果您打算升级到版本 9 及更高版本，您应该查看official documentation，因为现在它已经改进了很多。

【讨论】：