Angular 角度6 CLI定位和；多语言支持的国际化

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

我们如何在angular 6中实现本地化和国际化？这是一个角度为6的版本。

请参阅：

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

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

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

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

使用嵌套的.json对象 创建最小角度6项目

我们使用@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

对于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';

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

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

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

或

然后我们需要将模块导入@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翻译文件

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

现在，我们在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”将带有define的标签转换为内联字符串。由于我们有时需要替换转换中的值，因此可以将数据对象传递到“translate”管道中

<h1 translate>Title</h1>

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

因为我们将这个对象传递到“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对象

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

如果您希望能够更好地控制翻译，例如翻译页面块（从最终用户的角度）或组件（从开发人员的角度），一个解决方案可以是：；使用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"
    }
}

并在相应的模板中：

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

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

标题
{{'Intro'| translate:user}
{{'Startpage.TranslationSections'| translate}}
{{'Aboutpage.TranslationSections'| translate}}


EN
fr

组件.module.ts

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

课堂语言服务.ts

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

从'@angular/core'导入{Injectable}；
从'@ngx translate/core'导入{TranslateService，LangChangeEvent}；
从“rxjs”导入{ReplaySubject}；
从“rxjs/operators”导入{take}；
@可注射（{providedIn:'root'}）
导出类语言服务{
语言$=新的ReplaySubject（1）；
translate=this.translateService；
// 國旗對照;
构造函数（私有translateService:translateService）{}
setInitState（）{
this.translateService.addLangs（['en'，'cn'，'vi']）；
log（'Browser Lang'，this.translate.getBrowserLang（））；
const browserLang=（this.translate.getBrowserLang（）.includes（'vi'））？'vi'：'cn'；
console.log（“anhtt”，“anguage=“+browserLang”）；
这个.setLang（browserLang）；
}
setLang（lang:string）{
this.translateService.onLangChange.pipe（take（1））.subscribe（结果=>{
this.language$.next（结果）；
});
this.translateService.use（lang）；
}
}

app.component.html

<h1>How to multi language in angular 7</h1>
<p >{{'content' |translate}}</p>
<h4 translate>
  {{'message' |translate}}
</h4>
<button (click)="selectLanguageEN()">English</button>
<button (click)="selectLanguageCN()">中國</button>
<button (click)="selectLanguageVI()">Viet Nam</button>

如何在angular 7中使用多种语言
{{'content'| translate}

{{'message'| translate}}
英语
中國
越南

代码演示：

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

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

---

如果我想使用默认区域设置，我该怎么办？@JesusSandrea使用浏览器语言var language=window.navigator.userLanguage | | window.navigator.language；警觉（语文）//适用于IE/SAFARI/CHROME/FFin构建它为构建提供404检查文件位置