主要使用ngx-translate模块实现国际化功能

ngx-translate 官网http://www.ngx-translate.com/

安装方法

一、安装 ngx-translate模块包

npm install @ngx-translate/core@9.1.1 --save

npm install @ngx-translatetp-loader --save

二、创建 i18n 语言文件

在assets文件夹下创建 国际化语言文件夹 i18n，在i18n文件夹下创建相应的语言包文件，如图：

分别创建了中文语言包 —zh.json 英文语言包—en.json，这两个语言包的数据必须是一一对应的，否则会出不来相应的效果。

// zh.json{"add":"增加","title":"现在是中文版"}//en.json{"add":"add","title":"Now it's in English"}

三、根模块app.module.ts 导入该模块

1.导入所需要的包

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';

import {TranslateHttpLoader} from '@ngx-translate/http-loader';

因为我们采用的是外部文件配置语言包的方法，所以还需要引入http模块

import {HttpClientModule, HttpClient} from '@angular/common/http';

2.模块配置

//导出加载函数export function createTranslateHttpLoader(http:HttpClient){return new TranslateHttpLoader(http, './assets/i18n/', '.json');}@NgModule({declarations: [AppComponent],imports: [...TranslateModule.forRoot({loader:{provide:TranslateLoader,useFactory:[createTranslateHttpLoader],deps:[HttpClient]}})],providers: [],bootstrap: [AppComponent]})

子模块配置

如果采用了angular的子模块懒加载功能的话，则需要对子模块也进行配置，若没有则略过……

导入的文件包和函数配置等都是相同的，只有imports注入的时候不太一样，需要使用forChild()的方法

 @NgModule({...imports: [...TranslateModule.forChild({loader:{provide:TranslateLoader,useFactory:[createTranslateHttpLoader],deps:[HttpClient]}})],...})

在组件中使用

1.ts文件使用translateService服务

import { TranslateService } from '@ngx-translate/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {title = 'app';en=true;zh=false;constructor(private translate:TranslateService){//添加语言支持translate.addLangs(["en", "zh"]);//设置默认语言，一般在无法匹配的时候使用translate.setDefaultLang('zh');//获取当前浏览器环境的语言比如en、 zhlet browserLang = translate.getBrowserLang();translate.use(browserLang.match(/en|zh/) ? browserLang : 'zh');}//切换语言changeLang(lang) {this.translate.use(lang);}}

2.html中使用

{{'add' | translate}{{'title' | translate}}!

订阅语言切换事件

通常某些时候我们需要在语言切换以后做一些其他的事情，这时候就需要监听语言包的改变事件了

ngOnInit() {//订阅语言切换事件this.translate.onLangChange.subscribe((params) => {// do something});}

扩展阅读：Angular i18n（国际化方案）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！