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

Question

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

Answer 1

在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 文件作为键值对 store/access 翻译后的值。

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

Answer 2

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

在您的应用程序中安装 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>

继续编码。享受吧！

希望对您有所帮助。 :)

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

Internationalization in angular 8 to translate whole application

javascript

internationalization

translate

typescript

angular