我们的应用程序中使用Angular 6。在该应用程序中,我们想要提供多语言支持。
如何在Angular 6中实现本地化和国际化? 这是一个Angular 6版本。
我们的应用程序中使用Angular 6。在该应用程序中,我们想要提供多语言支持。
如何在Angular 6中实现本地化和国际化? 这是一个Angular 6版本。
参考:https://dgwebidea.blogspot.com/2020/01/angular-internationalization-and.html
使用ngx-translate翻译Angular 6应用程序
我们将要做的事情:
创建最小化的Angular6项目 安装和加载ngx-translate 初始化TranslateService 创建.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
"@ngx-translate/core": "^9.1.1"
"@ngx-translate/http-loader": "^3.0.1"
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
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
};
...
}
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>
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