关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

alaege 发布于2019-08-29 12:58 / 3385人阅读

摘要：关于的，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。

关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：

首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），
cmd打开命令进入到随便一个目录底下：

ng new aaa                    --创建名字叫aaa文件

输入指令下载依赖

npm install           --下载依赖包node_modules

这时文件全部都有了：

紧接着开始我们关于i18n解决方法。
在aaa这个文件目录底下输入命令来安装ng2-translate：

npm install  ng2-translate            --save
npm install  @ngx-translate/core         
npm install  @ngx-translate/http-loader

然后打开我们的文件在一个文件名为assets底下新建一个文件夹名字叫i18n，assets在文件src里面，然后文件夹里面再创建两个json文件，名字分别为“en.json”和“zh-CN.json”，分别代表英文和中文（记得编辑器生成后改编码utf-8，不然之后浏览器显示中文会乱码）。

en.json：

{
"hello":"Hollo",
"language":"Chinese and English"
}

zh-CN.json:

{
"hello":"你好",
"language":"中文和英文"
}

然后在打开app文件，在 app.module.ts 中添加以下代码：

import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import {Http} from "@angular/http";
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from "ng2-translate/ng2-translate";


export function HttpLoaderFactory(http:Http){
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (HttpLoaderFactory),
      deps: [Http]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

然后在app.component.ts文件里面：添加一下代码：

import {TranslateService} from "ng2-translate";

export class AppComponent {
    getLangs:any[];  //定义一个数组
    constructor(private translate: TranslateService) {
    //添加语言支持
    }
    ngOnInit(){
        //下拉按钮的值
        this.getLangs = [
            {label:"中文",value:"zh-CN"},
            {label:"英语",value:"en"}
        ];
        //添加语言
        this.translate.addLangs(["zh-CN", "en"]);

        //设置默认语言
        this.translate.setDefaultLang("zh-CN");

        //获取当前浏览器环境的语言比如en、zh-CN
        let broswerLang = this.translate.getBrowserLang();
        
        //使用语言
        this.translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : "zh-CN");    
    }

    changeLang(index) {
         this.translate.use(index);
    }
    
      title = "angular-Translate";
}

最后html代码呈上：


    
        Welcome to {{title}}!
    
  
  {{ "language" | translate }}

最后一步：
输入指令

ng serve     //启动服务

GPU云服务器云服务器大家分享给大家推荐大家可以的大家需要掌握的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112275.html

关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

摘要：关于的，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），cmd打开命令进入到随便一个目录底下： ng new a...

娣辩孩 2019-08-20 18:13 评论0 收藏0
深入浅出了解“装箱与拆箱”

摘要：本章部分内容从源码中解读一些自动装箱与拆箱的原理，以及会出现的一些陷阱已经性能等。例题分析我们通过几个经典的问题，来看看大家到底理解了装箱与拆箱的知识点没。 showImg(https://img-blog.csdnimg.cn/20190426221838971.gif);showImg(https://img-blog.csdnimg.cn/20190426221918208.pn...

FullStackDeveloper 2019-08-16 17:01 评论0 收藏0
react 国际化了解一下

摘要：先睹为快先看一下最后的成果来一发控制台中对应中的信息开始原理原理其实很简单字符串替换。拉取远程的国际化文件到本地，再根据语言做一个映射就可以了。背景楼主最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下：一些探索也说不上是探索吧，就Google了一波， GitHub 上找了一个比较成熟的库 react-i18next，...

CrazyCodes 2019-08-29 16:44 评论0 收藏0
react 国际化了解一下

摘要：先睹为快先看一下最后的成果来一发控制台中对应中的信息开始原理原理其实很简单字符串替换。拉取远程的国际化文件到本地，再根据语言做一个映射就可以了。背景楼主最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下：一些探索也说不上是探索吧，就Google了一波， GitHub 上找了一个比较成熟的库 react-i18next，...

魏明 2019-08-23 11:58 评论0 收藏0