A translation module for Angular2/Angular4 projects.
npm install angular4-translate npm install --save angular4-translate `$3
Import `TranslateModule` and `TranslateModule.forRoot(Dictionary)`app.module.ts
`javascript
import { TranslateModule, TranslateService } from 'angular4-translate'; const dictionary: any = {
en: {
PHRASE: 'I was {{ event }} in {{ location }} at {{ time }}',
PARAMS: {
EVENT: 'studying',
LOCATION: 'library',
TIME:'saturday'
}
},
zh: {
PHRASE: '我{{ time }}在{{ location }}{{ event }}',
PARAMS: {
EVENT: '学习',
LOCATION: '图书馆',
TIME: '礼拜六'
}
}
};
@NgModule({
declarations:[...],
imports:[
...
TransalteModule.forRoot(dictionary),
...
],
providers:[...],
...
})
export class AppModule{
constructor( private translate: TranslateService ){
this.translate.setDefault('en');
}
}
`#### Use Pipe
translate.html
`html
{{ 'PARAMS.EVENT' | translate }}
{{ 'PHRASE' | translate: { event: 'shopping', location: 'mall', time: 'Sunday' } }}
{{ 'PHRASE' | translate: params }}
`
translate.ts
`javascript
export class TranslateComponent{
params: any = {
event: 'Having Dinner',
location: 'KFC',
time: 'Tuesday'
}
}
`#### Use Directive
translate.html
`html
`
translate.ts
`javascript
export class TranslateComponent{
params: any = {
event: 'Having Dinner',
location: 'KFC',
time: 'Tuesday'
}
}
`#### Use Control Code
translate.html
`html
{{ translatedPhrase }}
`
translate.ts
`javascript
import { TranslateService } from 'angular4-translate'; export class TranslateComponent{
private translatedPhrase: string;
constructor( private translateService: TranslateService ){
this.translatedPhrase = this.translateService.instance('PHRASE', { event: 'sleep', location: 'home', time: 'midnight' });
}
}
``