共计 2976 个字符,预计需要花费 8 分钟才能阅读完成。
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 的方式。
参考:
- https://www.npmjs.com/package/@ngx-translate/core