關于angular2.0的i18n國際化的解決方法，分享一下給大家，有錯大家指出來互相學習哈。。。

娣辯孩發布于2019-08-20 18:13 / 1277人閱讀

摘要：關于的，網上的資料也不多，剛好項目需要用到，就自己去查閱各種資料，自己整理了出來，分享下出來給大家吧。

關于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云服務器大家分享給大家推薦大家可以的大家需要掌握的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84207.html

關于angular2.0的i18n國際化的解決方法，分享一下給大家，有錯大家指出來互相學習哈。。。

摘要：關于的，網上的資料也不多，剛好項目需要用到，就自己去查閱各種資料，自己整理了出來，分享下出來給大家吧。關于angular2的i18n，網上的資料也不多，剛好項目需要用到，就自己去查閱各種資料，自己整理了出來，分享下出來給大家吧。廢話不多說！直接上代碼：首先我們肯定要新建一個文件，叫aaa（網上angular-cli教程很多），cmd打開命令進入到隨便一個目錄底下： ng new a...

alaege 2019-08-29 12:58 評論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