时间:2021-05-28
angular的国际化方案,采用ngx-translate来实现。
安装模块:
npm install @ngx-translate/core --save在根模块中导入:
// other moduleimport {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 moduleimport {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.tsthis.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的方式
在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的方式。
参考:
https:///package/@ngx-translate/core
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
始因--懒最近项目中,经常用到多语言翻译,而iOS的多语言适配,设计给出的多语言都是指定的翻译制作成的一系列表格,基本都要一点一点复制到对应的语言文件中,如此反
本文实例讲述了thinkphp多语言切换设置方法。分享给大家供大家参考,具体如下:thinkphp多语言设置有点‘高大上',为什么说它有点&
本文实例为大家分享了Androidapp应用实现多语言切换功能,供大家参考,具体内容如下1.添加多语言文件在不同的value文件夹下(例如value、value
本文以实例形式简述了ThinkPHP的多语言支持与多模板支持。是ThinkPHP中非常重要的技巧,分享给大家供大家参考。具体如下:一、ThinkPHP多语言支持
python文件特定行插入和替换实例详解python提供了read,write,但和很多语言类似似乎没有提供insert。当然真要提供的话,肯定是可以实现的,但