angular的国际化方案,采用ngx-translate来实现。
安装模块:
npm install @ngx-translate/core --save
在根模块中导入:
// other module
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
// other module
TranslateModule.forRoot(),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
我们希望可以在一个固定的文件里面配置对应的翻译文件,然后在每个用到的组件里面使用它,随意我们需要借助TranslateHttpLoader来加载翻译文件。首先安装TranslateHttpLoader:
npm install @ngx-translate/http-loader --save
翻译文件可以放在/assets/i18n/[lang].json中,[lang]代表使用的语言文件名称。然后我们可以在跟组件中添加配置对应的加载项:
// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定义加载方法
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json?');
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
// other module
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
}
}),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
然后我们在翻译文件中配置一个简单的示例:
// /asserts/il8n/en.json
{
"Hello": "hello, {{value}}",
"Introduce": {
"Name": "my name is {{name}}.",
"Today": "today is {{date}}, and now time is {{time}}"
}
}
应用的时候我们可以使用点语法,例如:Introduce.Name。
好了,定义好之后再来看如何使用。我们可以使用服务或管道或指令的方式来达到显示语言的效果。在使用之前,我们需要在应用中初始化TranslateService:
import { Component } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
constructor(
public translate: TranslateService,
) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}
我倾向于在跟组件的construct里面初始化TranslateService,因为一个系统的翻译是统一的,在开始应用的时候就需要设置好默认语言。这里使用translate.setDefaultLang('en')来设置默认语言为英文。然后使用translate.user('en')手动选择使用英文。在切换语言的时候,我们使用translate.user([lang])来设置启用哪个语言。
最后来使用翻译,有多种使用的方式。来看看。
在运行的时候,会先发起个请求通过Http获取翻译文件,通过Observable的方式应用参数上去,然后获得翻译的内容。
// app.compent.ts
this.translate.get(
'Introduce.Name',
{name: 'Jarvis'}
).subscribe((res: string) => {
console.log('res', res); // res my name is Jarvis.
});
this.translate.get(
'Introduce.Today',
{
date: new Date().getDate(),
time: new Date().getTime()
},
).subscribe((res: string) => {
console.log('res', res); // res today is 22, and now time is 1534937370461
});
<div>{{'Hello' | translate: param</div>
在js里定义参数param:
const param = {
value: 'world',
};
管道的方式虽然方便,但参数还是需要在先定义好,这样子变量多的话也比较繁琐。使用指令的方式可以在程序中直接传参:
<span [translate]="'Introduce.Name'" [translateParams]="{name: 'Jarvis'}"></span>
或者直接将元素的内容作为key:
<span translate [translateParams]="{date: '10.11', time: '20:33'}">Introduce.Today</span>
可以在翻译文件中中定义简单的行级html标签
{
"Hello": "hello, {{value}}",
}
要渲染它们,在任何元素上只需要将innerHTML属性和管道一同使用即可。
<p [innerHTML]="'Introduce.Name'| translate: param"></p>
有些情况下,我们要在js里面动态的获取值和赋值,这时候没法使用模板语法,使用subscribe的方式又不利于代码的组织,这时候我们需要即时翻译来搞定了。方法定义:
instant(key: string|Array<string>), insterpolateParams?: Object):string|Object
调用的时候传入key和对应的参数,即可返回当前key的翻译:
this.translate.instant('HELLO', {value: 'Jarvis'});
但是需要注意的是,这个方法是同步的,默认加载器是异步的。使用这个方法需要确保翻译文件已经加载完成了,如果不确定,就应该用get的方式。
参考:https://www.npmjs.com/package/@ngx-translate/core
原文来源:https://segmentfault.com/a/1190000019198537
在项目开发中遇到需要多语言的支持,在Vue项目中有对应的组件vue-i18n,而且对项目的代码修改不大.这篇文章讲解vue-i18n的安装和使用,语言包的生成 & 替换项目中原有的静态文本
需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示。在用户点击切换语言后,把选择的语言版本保存在cookie中;定义语言的标识+内容的json字符串
因为球是圆的,所以不论发生什么都有可能,对这点我是深信不疑的,但最近我总是在怀疑,JavaScript也是圆的!本文带你细数JavaScript的黑话,因为这一切是多么的有趣,又是多么的无意义,就如这世界一般,很多事情只有当你了解过,才能做出错误的选择。
你不用写一行Javascript或者考虑这种语言的局限,就能生产在浏览器能运行的代码。这篇文章包括了十种有趣的语言能够编译为Javascript,在浏览器或者Node.js中被执行
你想不想知道下一波令人兴奋无比的 JavaScript 特性?你甚至都不知道自己需要这些特性。现在,我要向你展示三个可能会改变你编写 JavaScript 代码方式的提案。这些提案中有很多方面仍未最终确定。
7种主流编程语言:Python需要拿着游标卡尺学习的语言 ,C/C++大多数中国程序员的第一个语言 ,Java最长寿的语言 ,C#自称不是 Java 的 Java 语言 ,JavaScript 不是 Java 语言的语言 ,SQL数据库离不开的语言 ,PHP 世界上最好的语言
JavaScript 已经成为了一门一流的编程语言,使用 JavaScript 的程序员们正变得无所不能。质疑 JavaScript 是否是一种「真正的」编程语言的时代已经过去,现在的问题是,你有没有准备好投入到这门语言中,进行真正的学习。
如果你有兴趣编写计算机程序,移动APP,网站,游戏或者任何软件,你应该学习编程。编程语言撰写的代码构建了计算机的程序。无论对于何种计算机编程语言,其核心编程思想都是一样的
一个项目发展到一定的环境或者一开始就是为多国打造的,就需要考虑国际化了。简单来说,就是一套页面,多套语言。主要探讨了两种完全不同的国际化方式,前一种主流,后一种完全属于另类,但还是有用武之地的。如果你的页面不太复杂,完全可以采取这种方式。
对于程序员来说,选择一门适合自己,适合职业发展的编程语言也是同等重要。各大编程语言的受欢迎程度、学习的人群数量,以及由于人工智能的兴起,最热门的编程语言排行榜也发生了变化。让我们来看看。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!