angular 8 中的国际化翻译整个应用程序

Question

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

Answer 1

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

1. 在您的应用程序中安装 ngx-translate npm package。

npm i @ngx-translate/core --save

2. 现在你需要安装 http-loader

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

3. 现在将此代码粘贴到您的 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');
}

4. 在 /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.

5. 在组件 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);
  }
}

6. 在 html 文件中

  <p translate>Title</p>

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

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

继续编码。 请享用！

我希望它对你有帮助。 :)

Answer 2

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

npm install @ngx-translate/core --save

它很容易安装： https://github.com/ngx-translate/core/blob/master/README.md#installation

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

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