angular2 国际化实现
angular2国际化通过管道(pipe)的形式实现下载ng2-translate
如何使用可以参照https://github.com/ocombe/ng2-translate
自己写了一个小DEMO,可以在dev分支查看https://github.com/lyt308012546/ng2-webpack-demo
import { Component } from '@angular/core';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import {
TranslateService,
TranslateLoader,
TranslatePipe,
TranslateStaticLoader
} from 'ng2-translate/ng2-translate';
@Component({
selector: 'translate',
template: `
<br>
<br>
<br>
<button (click)="changeLang('en')">英文</button>
<button (click)="changeLang('zh_cn')">中文</button>
<br>
<h1>{{ 'HELLO' | translate:{value: param} }}</h1>
`,
pipes: [TranslatePipe]
})
export class Translate {
param: string = "world";
// userLang: string = "en";
constructor(public translate: TranslateService) {
// var userLang = navigator.language.split('-')[0]; // use navigator lang if available
// userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
// // this language will be used as a fallback when a translation isn't found in the current language
// translate.setDefaultLang('zh_cn');
// // the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use("zh_cn");
//获取值
console.log(this.translate.instant("HELLO"));
}
changeLang(userLang) {
// the lang to use, if the lang isn't available, it will use the current loader to get them
this.translate.use(userLang);
}
}
export const TRANSLATE_PROVIDERS = [
HTTP_PROVIDERS,
{
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
},
TranslateService
];
angular2 国际化实现的更多相关文章
- Angular2国际化
使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core ...
- Angular2中使用ngx-translate进行国际化
转自 https://blog.csdn.net/u014291497/article/details/61233033 相较于angularjs中的ng-translate, angular2也有适 ...
- Angular2对待一个URL的处理流程
直到一年前我还不会想到我会写一本书出来,直到两三年前我还不会想到会把自己的业余时间放在写作(技术博客)上.当初在机缘巧合之下,我只是想把自己工作中遇到的问题总结起来,发布在博客中以供日后查阅.不想竟然 ...
- Angular2之管道学习笔记
管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...
- 推荐一套Angular2的UI模板
Core UI Core UI是一款基于Bootstrap4的UI模板,有html.angular2,react和vue版.我是在使用angular2版本中发现其项目结构不符合angular风格指南推 ...
- [转]Ionic国际化解决方案
本文转自:http://www.cnblogs.com/crazyprogrammer/p/7904436.html 1. 核心内容 使用Angular2的国际化(i18n)库:ngx-tra ...
- Ionic国际化解决方案
1. 核心内容 使用Angular2的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https:// ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
随机推荐
- 修改VS解决方案及工程名,解决如何打开高/版本VS项目
对于VS2008等低版本与高版本VS之间的转换问题: 对照下面2个版本的不同点自由修改,切换到相应的版本文件(红字修改,灰色删除) ---------------------------------- ...
- JS常用的设计模式(9)——策略模式
策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. $( div ).animate( {&quo ...
- 【EF学习笔记03】----------使用原生Sql语句
在EF中使用原生SQL,首先要创建上下文对象 using (var db = new Entities()) { //数据操作 } 新增 string sql = "insert into ...
- C++类成员函数的 重载、覆盖和隐藏区别
重载:成员函数被重载的特征: (1)相同的范围(在同一个类中): (2)函数名字相同: (3)参数不同: (4)virtual 关键字可有可无. #include <iostream> u ...
- .net4.0注册到IIS
IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...
- kettle的job
1.首先创建一个job 2.拖拽组件形成下面的图 这里需要注意,在作业中的连线分为三类: 黄色锁的线:这个步骤执行之后,无论失败与否都会执行下一个步骤 绿色对号线:步骤执行成功了,才会执行下一个步骤. ...
- Varint编码
LevelDB内部通过采用变长编码,对数据进行压缩来减少存储空间,采用CRC进行数据正确性校验.下面就对varint编码进行学习. 传统的integer是以32位来表示的,存储需要4个字节,当如果整数 ...
- Ajax的get请求向服务器请求数据五步骤?
如下: ①创建ajax对象 ②建立http请求 ③发送http请求 ④设置ajax对象状态改变的回调函数 ⑤判断ajax状态是否等于4,做相应的业务逻辑
- linux 下su 和sudo 的用法以及区别
一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,beinan用 ...
- IBM开发者 JSON 教程
在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScript Object Notation(JSON),以及如何 ...