Angualar 11前端项目使用ngx-translate实现国际化

主要使用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、 zh

    let browserLang = translate.getBrowserLang();

    translate.use(browserLang.match(/en|zh/) ? browserLang : 'zh');


  }



    //切换语言

    changeLang(lang) {
      this.translate.use(lang);
   
    }

}

2.html中使用

<div style="margin-top:50px;">{{'add' | translate}</div><div>{{'title' | translate}}!</div>

 

订阅语言切换事件

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

ngOnInit() {

    //订阅语言切换事件

    this.translate.onLangChange.subscribe((params) => {

        // do something

    });

}

 

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