資訊專欄INFORMATION COLUMN
摘要：關(guān)于的，網(wǎng)上的資料也不多，剛好項(xiàng)目需要用到，就自己去查閱各種資料，自己整理了出來(lái)，分享下出來(lái)給大家吧。
關(guān)于angular2的i18n，網(wǎng)上的資料也不多，剛好項(xiàng)目需要用到，就自己去查閱各種資料，自己整理了出來(lái)，分享下出來(lái)給大家吧。廢話不多說！直接上代碼：
首先我們肯定要新建一個(gè)文件，叫aaa（網(wǎng)上angular-cli教程很多），
cmd打開命令進(jìn)入到隨便一個(gè)目錄底下：
ng new aaa --創(chuàng)建名字叫aaa文件
輸入指令下載依賴
npm install --下載依賴包node_modules
這時(shí)文件全部都有了：
緊接著開始我們關(guān)于i18n解決方法。
在aaa這個(gè)文件目錄底下輸入命令來(lái)安裝ng2-translate：
npm install ng2-translate --save npm install @ngx-translate/core npm install @ngx-translate/http-loader
然后打開我們的文件在一個(gè)文件名為assets底下新建一個(gè)文件夾名字叫i18n，assets在文件src里面，然后文件夾里面再創(chuàng)建兩個(gè)json文件，名字分別為“en.json”和“zh-CN.json”，分別代表英文和中文（記得編輯器生成后改編碼utf-8，不然之后瀏覽器顯示中文會(huì)亂碼）。
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[]; //定義一個(gè)數(shù)組
constructor(private translate: TranslateService) {
//添加語(yǔ)言支持
}
ngOnInit(){
//下拉按鈕的值
this.getLangs = [
{label:"中文",value:"zh-CN"},
{label:"英語(yǔ)",value:"en"}
];
//添加語(yǔ)言
this.translate.addLangs(["zh-CN", "en"]);
//設(shè)置默認(rèn)語(yǔ)言
this.translate.setDefaultLang("zh-CN");
//獲取當(dāng)前瀏覽器環(huán)境的語(yǔ)言比如en、zh-CN
let broswerLang = this.translate.getBrowserLang();
//使用語(yǔ)言
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 //啟動(dòng)服務(wù)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112275.html
摘要：關(guān)于的，網(wǎng)上的資料也不多，剛好項(xiàng)目需要用到，就自己去查閱各種資料，自己整理了出來(lái)，分享下出來(lái)給大家吧。 關(guān)于angular2的i18n，網(wǎng)上的資料也不多，剛好項(xiàng)目需要用到，就自己去查閱各種資料，自己整理了出來(lái)，分享下出來(lái)給大家吧。廢話不多說！直接上代碼： 首先我們肯定要新建一個(gè)文件，叫aaa（網(wǎng)上angular-cli教程很多），cmd打開命令進(jìn)入到隨便一個(gè)目錄底下： ng new a...
摘要：本章部分內(nèi)容從源碼中解讀一些自動(dòng)裝箱與拆箱的原理，以及會(huì)出現(xiàn)的一些陷阱已經(jīng)性能等。例題分析我們通過幾個(gè)經(jīng)典的問題，來(lái)看看大家到底理解了裝箱與拆箱的知識(shí)點(diǎn)沒。 showImg(https://img-blog.csdnimg.cn/20190426221838971.gif);showImg(https://img-blog.csdnimg.cn/20190426221918208.pn...
摘要：先睹為快先看一下最后的成果來(lái)一發(fā)控制臺(tái)中對(duì)應(yīng)中的信息開始原理原理其實(shí)很簡(jiǎn)單字符串替換。拉取遠(yuǎn)程的國(guó)際化文件到本地，再根據(jù)語(yǔ)言做一個(gè)映射就可以了。 背景 樓主最近新接了一個(gè)項(xiàng)目，從0開始做，需要做多語(yǔ)言的國(guó)際化，今天搞了一下，基本達(dá)到了想要的效果， 在這里簡(jiǎn)單分享下： 一些探索 也說不上是探索吧，就Google了一波， GitHub 上找了一個(gè)比較成熟的庫(kù) react-i18next，...
摘要：先睹為快先看一下最后的成果來(lái)一發(fā)控制臺(tái)中對(duì)應(yīng)中的信息開始原理原理其實(shí)很簡(jiǎn)單字符串替換。拉取遠(yuǎn)程的國(guó)際化文件到本地，再根據(jù)語(yǔ)言做一個(gè)映射就可以了。 背景 樓主最近新接了一個(gè)項(xiàng)目，從0開始做，需要做多語(yǔ)言的國(guó)際化，今天搞了一下，基本達(dá)到了想要的效果， 在這里簡(jiǎn)單分享下： 一些探索 也說不上是探索吧，就Google了一波， GitHub 上找了一個(gè)比較成熟的庫(kù) react-i18next，...
閱讀 3960·2021-11-24 09:38
閱讀 1225·2021-10-19 11:42
閱讀 1829·2021-10-14 09:42
閱讀 2154·2019-08-30 15:44
閱讀 544·2019-08-30 14:04
閱讀 2888·2019-08-30 13:13
閱讀 1949·2019-08-30 12:51
閱讀 956·2019-08-30 11:22
