angular - Angular 6 CLI localisation & Internationalization for multilingual support

Question

We are using Angular 6 in our Application. In that application we want to give multilingual support.

How can we implement localisation & Internationalization in angular 6? Its an angular 6 version.

标签： angulartypescriptlocalizationinternationalizationangular6

Answer 1

参考：https ://dgwebidea.blogspot.com/2020/01/angular-internationalization-and.html

使用 ngx-translate 翻译 Angular 6 应用程序我们将做什么：

创建最小的 Angular6 项目 安装和加载 ngx-translate 初始化 TranslateService 创建 .json 翻译文件 翻译简单的标题和介绍 集成语言切换器 用变量翻译句子

使用嵌套的 .json 对象

创建最小的 Angular6 项目

我们使用@angular/cli 在终端中创建一个名为“traduction”的新项目：

ng new traduction --prefix tr
cd traduction
ng serve -o

---

安装和加载 ngx-translate

在项目文件夹“traduction”中的终端中使用 npm：

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

注意：对于 angular 6 以下使用以下版本

"@ngx-translate/core": "^9.1.1" 
"@ngx-translate/http-loader": "^3.0.1"

对于 Angular 5，请使用最新版本 10 及更高版本

将必要的模块导入 app.module.ts ：

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

添加一个函数，该函数返回一个“TranslateHttpLoader”并将其导出（AoT 需要）。在这种情况下，我们创建的 HttpLoaderFactory 函数返回一个可以使用 Http 和 .json 加载翻译的对象，但您可以编写自己的类，例如使用全局 JavaScript 变量而不是加载文件，或者使用谷歌翻译：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

或者

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

然后我们需要将我们的模块导入到 @NgModule 中，这是告诉 Angular 将此模块加载到您的 AppModule 中的导入：

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

注入翻译服务

在“app.component.ts”中，我们现在初始化“TranslateService”，我们导入 TranslateService：

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

然后在 AppComponent 类中，我们注入服务并定义我们的默认语言。为了为下一步做好准备，我们添加了一个切换语言的功能。

constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }

  switchLanguage(language: string) {
    this.translate.use(language);
  }

创建 .json 翻译文件

我们现在在 assets/i18n 文件夹中创建我们的翻译文件：

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am Arthur, I am 42 years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}

这些是简单的 .json 文件，将由我们在“app.module.ts”中创建的“TranslateHttpLoader”加载。

翻译简单的标题和介绍

在 app.component.html 中，我们在“h1”标签内添加一个带有翻译“指令”的标题。该指令将获取标签内的文本并将其替换为匹配的翻译。如果您使用该指令，则必须确保标签内除了文本之外没有其他内容。

作为第二个示例，我们使用“TranslationPipe”来翻译带有定义为内联字符串的标签。由于有时我们想要替换的翻译中有值，我们可以将数据对象传递到“翻译”管道。

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

集成语言切换器

我们现在可以将上面在 app.component.ts 中看到的语言切换器功能附加到一个按钮上。在这种情况下，我们为每种语言创建一个按钮，并使用匹配的语言键调用 switchLanguage() 函数。

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

<button (click)="switchLanguage('fr')">fr</button>

翻译带有变量的句子

如前所述，您有时会有包含变量的句子。在这个小例子中，我们在“app.component.ts”中有一个带有年龄和姓名的用户对象，我们想要翻译一个包含这些值的句子：

...
export class AppComponent {
  user = {
    name: 'Arthur',
    age: 42
  };
...
}

因为我们将这个对象传递到“翻译”管道中，所以我们现在可以在翻译中使用它的属性和 {{ placeholder }} 表示法。

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}

使用嵌套的 .json 对象

如果您希望能够对翻译进行更多控制，例如翻译页面块（从最终用户的角度）或组件（从开发人员的角度），一种解决方案可能如下；使用 git repo 中描述的嵌套 .json 对象。-json 文件中的示例可能如下所示：

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old.",
    "Startpage": {
        "TranslationSections": "Hello World"
    },
     "Aboutpage": {
        "TranslationSections": "We are letsboot"
    }
}


{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
    "Startpage": {
        "TranslationSections": "Bonjour Monde"
    },
    "Aboutpage": {
        "TranslationSections": "Nous sommes letsboot"
    }
}

并在相应的模板中：

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

<div>
  {{ 'Startpage.TranslationSections' | translate }}
</div>

<div>
  {{ 'Aboutpage.TranslationSections' | translate }}
</div>

<br/>

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