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])来设置启用哪个语言。
最后来使用翻译，有多种使用的方式。来看看。
使用方式
使用service的方式
在运行的时候，会先发起个请求通过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
});
使用pipe的方式
<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标签
可以在翻译文件中中定义简单的行级html标签
{
"hello": "hello, {{value}}",
}
要渲染它们，在任何元素上只需要将innerhtml属性和管道一同使用即可。
<p [innerhtml]="'introduce.name'| translate: param"></p>
常用方法
instant() 即时翻译
有些情况下，我们要在js里面动态的获取值和赋值，这时候没法使用模板语法，使用subscribe的方式又不利于代码的组织，这时候我们需要即时翻译来搞定了。方法定义：
instant(key: string|array<string>), insterpolateparams?: object):string|object
调用的时候传入key和对应的参数，即可返回当前key的翻译：
this.translate.instant('hello', {value: 'jarvis'});
但是需要注意的是，这个方法是同步的，默认加载器是异步的。使用这个方法需要确保翻译文件已经加载完成了，如果不确定，就应该用get的方式。
参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论