Angular 6 ile Çok Dilli Uygulama

Merhaba arkadaşlar, geçenlerde çok dilli bir Angular yapısına ihtiyacımız vardı ve ngx-translate kütüphanesini kullandım. Oldukça kolay ve anlaşılır bir yapısı var. Ben de merak edenler için Angular 6 ile çok dilli Angular uygulaması hazırlamayı anlatmak istedim.

Angular’da bildiğiniz gibi bir içeriği formatlamak veya değiştirmek için bizlere Pipe özelliğini sunuyor. Kullanacağımız kütüphane de bu özelliğe dayanan bir yapı geliştirmiş ve önyüzdeki her yazıyı manipüle etme şansı sunuyor. Daha fazla uzatmadan başlayalım.

1) Kütüphaneyi indirmek

Öncelikle ngx-translate kütüphanesini indirelim.

npm install @ngx-translate/core --save

Eğer Angular 6 için indirecekseniz, yukarıda bulunan kodu yazmanız yeterli. Fakat Angular 5 ve daha aşağı bir sürüm için indirmeyi düşünüyorsanız şu tabloda bulunan sürümleri yüklemeniz gerekiyor.

Peki bir sürümü spesifik olarak nasıl yüklerim diyorsanız da, aşağıya bir not bırakalım :)

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

2) Uygulamada kullanmak

Bildiğiniz gibi bir modülü kullanmak istiyorsak AppModule dosyasında imports dizisinin içine bu modülü eklememiz gerekiyor.

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})

Herhangi bir componentte kullanmak istiyorsak öncelikle servisi constructorda inject etmemiz ve dilleri eklememiz gerekiyor. Bu işlemi app.component.ts dosyasında yapmak mantıklı çünkü her sayfada aynı kodları yazmak istemeyiz. Aşağıdaki kod parçacığı öncelikle tarayıcının diline bakıyor, eğer tarayıcının dili “en” veya “tr” ise hangisiyse onu tanımlıyor fakat hiçbiri değil ise default olarak “en” yapıyor ve İngilizce oluyor.

constructor(private translate: TranslateService) {
     translate.addLangs(["en", "tr"]);
     const browserLang = translate.getBrowserLang();
     translate.use(browserLang.match(/en|tr/) ? browserLang : "en");
}

Eğer kullanıcıya dil seçtirmek istiyorsanız HTML tarafında bir select box ile bu işlemi gerçekleştirebilirsiniz;

<select class="form-control select-language">
  <option lang="" translate="" selected="selected" value="">
    {{ lang }}
  </option>
</select>

TypeScript tarafındaki dil değiştirme işlemi de oldukça kolay. Yukarıda bulunan changeLanguage metodu da şu şekilde;

public changeLanguage(language: string) {
 this.translate.use(language);
}

Kullanacağımız dil dosyalarının varsayılan yolu assets/i18n/dilinAdı.json. i18n klasörünü oluşturup içine yazmaya başlayabiliriz. Örnek olarak “Ana Sayfa” kelimesini çevirelim.

// tr.json içeriği
{
  "HOME_PAGE": "Ana Sayfa"
}

// en.json içeriği
{
  "HOME_PAGE": "Home Page"
}

İster yukarıdaki gibi bir yapı kullanabilir isterseniz de iç içe (nested) json formatını kullanabilirsiniz. Örneğin;

// tr.json içeriği
{
  "HOME_PAGE": {
    "TITLE": "Ana Sayfa Başlığı"
  }
}

// en.json içeriği
{
  "HOME_PAGE": {
    "TITLE": "Home Page Title"
  }
}

Peki dosyaları hazırladığımızı ve her şeyin sorunsuz gittiğini varsayıyorum. Önyüzde yazılarımızı çevirme veya manipüle etme işlemini nasıl yapacağız? Birkaç yöntem var, istediğinizi kullanabilirsiniz.

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

Önyüzden dinamik bir veri göndermek de diğer bir yöntem;

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

Daha fazla özellik ve bilgi için kütüphanenin dokümantasyonuna bakabilirsiniz. Sağlıcakla kalın.

ngx-translate: https://github.com/ngx-translate/core