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 国际化实现的更多相关文章

  1. Angular2国际化

    使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core ...

  2. Angular2中使用ngx-translate进行国际化

    转自 https://blog.csdn.net/u014291497/article/details/61233033 相较于angularjs中的ng-translate, angular2也有适 ...

  3. Angular2对待一个URL的处理流程

    直到一年前我还不会想到我会写一本书出来,直到两三年前我还不会想到会把自己的业余时间放在写作(技术博客)上.当初在机缘巧合之下,我只是想把自己工作中遇到的问题总结起来,发布在博客中以供日后查阅.不想竟然 ...

  4. Angular2之管道学习笔记

    管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...

  5. 推荐一套Angular2的UI模板

    Core UI Core UI是一款基于Bootstrap4的UI模板,有html.angular2,react和vue版.我是在使用angular2版本中发现其项目结构不符合angular风格指南推 ...

  6. [转]Ionic国际化解决方案

    本文转自:http://www.cnblogs.com/crazyprogrammer/p/7904436.html 1.     核心内容 使用Angular2的国际化(i18n)库:ngx-tra ...

  7. Ionic国际化解决方案

    1.     核心内容 使用Angular2的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https:// ...

  8. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  9. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

随机推荐

  1. js中的条件语句

    //js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...

  2. (笔记)angular 多选按钮

  3. plsql 登录后,提示数据库字符集(AL32UTF8)和客户端字符集(ZHS16GBK)不一致

    plsql 登录后,提示数据库字符集(AL32UTF8)和客户端字符集(ZHS16GBK)不一致 (2014-07-25 18:40:34)转载▼ 标签: it 分类: Database Databa ...

  4. .net 调用SAP RFC函数获取数据的两种方式

    方式1:使用客户端自带的组件 安装客户端以后,添加引用:SAPFunctionsOCX(.net 的Com列表里一般找不到,需要引用DLL[一般位于以下路径:Program Files\SAP\Fro ...

  5. 浅谈C++虚函数

    很长时间都没写过博客了,主要是还没有养成思考总结的习惯,今天来一发. 我是重度拖延症患者,本来这篇总结应该是早就应该写下来的. 一.虚函数表 C++虚函数的机制想必大家都清楚了.不清楚的同学请参看各种 ...

  6. div模拟下拉框

    1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...

  7. Windows Server 2003搭建FTP服务器 实现盘符之间切换

     Serv-U中设置虚拟目录的方法 如果在E盘下有一个名为LoveHina的目录,在F盘下也有一个名为LoveHina的目录.那么,如何让使用同一个账号的用户可以同时访问这两个目录呢? 我们可以使用S ...

  8. [leetcode]_Symmetric Tree

    第二道树的题目,依旧不会做,谷歌经验. 题目解释: give you a tree , judge if it is a symmetric tree. 思路:我以为要写个中序遍历(进阶学习非递归算法 ...

  9. ViewGroup 和 View 事件传递及处理小谈

    前言 在自定义组件的时候少不了会去处理一些事件相关的东西,关于事件这块网上有很多文章,有说的对的也有说的不对的,我在理解的时候也有过一段时间的迷惑,现在把自己理解的东西写下来,给有相同疑问的朋友提供些 ...

  10. 部署到iis后,发现无法加载运行CSS文件

    解决方法: 打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容