angular4-translate

A translate module for Angular2/Angular4 Projects.

$3

`` 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


{{ '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' });
}
}
``

$3

!Final Effect

$3

1. ~~Support Parameters in translating sentences;~~
2. ~~Support NativeScript Projects;~~

$3

MIT