Angular 6 CLI本地化和国际化,提供多语言支持

Question

我们在我们的应用程序中使用Angular 6.在该应用程序中,我们希望提供多语言支持.

我们如何在角度6中实现本地化和国际化？它是一个角度6版本.

Answer 1

使用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

注意:使用以下版本以获得角度6

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

和角度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加载Translations的Object,但是您可以编写自己的Class,例如使用全局JavaScript变量而不是加载文件,或者使用Google Translate:

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]
})

注入TranslateService

在"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"标记内添加了带有translate"directive"的标题.该指令将获取标记内的文本并将其替换为匹配的翻译.如果您使用该指令,您必须确保标签内部没有其他内容,只有文本.

作为第二个例子,我们使用"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
  };
...
}

因为我们将此对象传递给"translate"管道,所以我们现在可以使用{{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对象

如果您希望能够对翻译进行更多控制,例如翻译页面块(从最终用户角度来看)或组件(从开发人员角度来看),则可以采用以下解决方案:使用嵌套的.json对象,如git repo中所述.示例在-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>