Angular 6 ile Çok Dilli Uygulama

1) Kütüphaneyi indirmek

npm install @ngx-translate/core --save
npm install @ngx-translate/core@9.1.1 -–save

2) Uygulamada kullanmak

@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot()
],
bootstrap: [AppComponent]
})
constructor(private translate: TranslateService) {
translate.addLangs(["en", "tr"]);
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|tr/) ? browserLang : "en");
}
<select class="form-control select-language" #langSelect (change)="changeLanguage(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}
</option>
</select>
public changeLanguage(language: string) {
this.translate.use(language);
}
// tr.json içeriği
{
"HOME_PAGE":"Ana Sayfa"
}
// en.json içeriği
{
"HOME_PAGE":"Home Page"
}
// tr.json içeriği
{
"HOME_PAGE": {
"TITLE": "Ana Sayfa Başlığı"
}
}
// en.json içeriği
{
"HOME_PAGE": {
"TITLE": "Home Page Title"
}
}
// Pipe Yöntemi
<span> {{ 'HOME_PAGE' | translate }} </span>
<span> {{ 'HOME_PAGE.TITLE' | translate }} </span>
// Directive Yöntemi 1
<span translate>HOME_PAGE</span>
<span translate>HOME_PAGE.TITLE</span>
// Directive Yöntemi 2
<div [innerHTML]="'HOME_PAGE' | translate"></div>
// en.json içeriği{
"HOME_PAGE": {
"TITLE" : "Home Page Title",
"HELLO" : "Hello Mr. {{ name }}"
}
}
// html içeriği<div [translate]="'HOME_PAGE.HELLO'" [translateParams]="{name: 'Caner'}"></div>

--

--

Full-Stack Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store