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编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
随机推荐
- ASP.NET的SEO:SEO Hack --- Html注入和Nofollow
ASP.NET的SEO:目录 黑帽(black hat)SEO主要是指采取"不怎么道德"(暂时就这么形容吧!)的方式进行搜索引擎优化. 1. 注入攻击,包括Sql注入和Html注入 ...
- angular directive指令相互独立
想要让指令的使用相互间不干扰,如下:
- wpf依赖属性、绑定实现原理、附加属性学习
依赖属性和普通属性相比节省内存的原因:对于普通属性,每个对象有需要存储一个普通属性的值,即便是默认值.而依赖属性的默认值是静态的存储在类中的,所有对象都使用同一默认值,所以对于拥有大量属性的控件来说这 ...
- 遍历input。select option 选中的值
<label> <input name="Fruit" type="radio" value="0" class=&quo ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- java高级工程师必备知识
成为Java高级工程师需要掌握哪些核心点? 每 逢长假都会有很多程序员跳槽,十一.过年是跳槽黄金时刻,尤其是过年.过年的时候年终奖到手,没有了多少牵挂,年终同学同事聚会比较多,沟通的就多,各种 工作机 ...
- Flex 4.0及4.6发布的网络应用在内网内会访问很慢的解决方案
Flex 4.x 开发的程序部署在外网在能访问到www.adobe.com的时能够很快加载完成,但是部署在本地局域网,不能访问外网的服务器上,用浏览器访问应用需要加载几分钟的时间,这种等待时间客户几乎 ...
- IEnumerable 接口 实现foreach 遍历 实例
额 为啥写着东西? 有次面试去,因为用到的时候特别少 所以没记住, 这个单词 怎么写! 经典的面试题: 能用foreach遍历访问的对象的要求? 答: 该类实现IEnumetable 接口 声明 ...
- 将python2.7+django1.10部署到SAE上
首先我想说的是我为什么选择SAE呢?本人学生一枚,没钱.然后sae好像又有免费的一定限额,所以我就选了它. 期间曲折颇多,实在不是三言两语所能道情的.各种百度,谷歌,最后所幸成功了,幸哉! 主要参考了 ...
- DrawTool画笔之图形笔
相关知识参考DrawTool画笔之纹理笔 , 图形笔的实现跟纹理笔的实现是一样的,重载Stroke的DrawCore方法,效果图: --------------------------------- ...