Angular 6 CLI本地化和国际化以支持多语言：

Question

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

如何在Angular 6中实现本地化和国际化? 这是一个Angular 6版本。

- Dinesh Ghule

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变量而不是加载文件，或者使用Google翻译。

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”标记内部。此指令将获取标记内的文本并将其替换为相应的翻译。如果您使用该指令，则必须确保标记内除文本外没有其他内容。

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

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

如果您想要对翻译进行更多的控制，例如从最终用户或开发者的角度翻译页面块或组件，一种解决方案是使用在 git 存储库中描述的嵌套 .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>

- Dinesh Ghule

---

如果我想使用默认语言环境，我该怎么做？ - Jesus Sandrea

@JesusSandrea 使用浏览器语言 - Dinesh Ghule

var language = window.navigator.userLanguage || window.navigator.language; alert(language); //适用于IE/SAFARI/CHROME/FF - Dinesh Ghule

检查构建的文件位置 - Dinesh Ghule

它在app.component.html中运行良好，但我无法在应用程序的其他部分中使用它，例如<div> {{ 'hello' | translate}} </div> 我收到以下错误：找不到管道“translate”。 - vijayakumar gopalakrishnan

Answer 2

component.module.ts

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

类 LanguagService.ts

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

    }
  }

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>

代码演示：

https://tienanhvn.blogspot.com/2019/06/angular-7-how-to-multi-language.html

- Tienanhvn