Ionic Multi Language Çok Dil Seçeneği

Ionic ile mobil uygulamalar yazıyorsunuz ve uygulamanızın çok dil seçeneği olmasını istiyorsunuz. ngx-translate ile kolayca ekleyebiliriz.

1. Kurulum

Öncelikle kurulum için aşağıdaki kodu uygulamamızın dizininde çalıştırarak npm ile ngx-translate kurulumunu yapıyoruz.

npm install @ngx-translate/core @ngx-translate/http-loader --save

Kurulu olan angular sürümünüzü kontrol edin, farklı versiyonlar için farklı ngx-translate versiyonu kurmanız gerekebilir. Eğer hata alırsanız aşağıdaki komutları kullanarak alt versiyonları kurun

npm remove @ngx-translate/core --save
npm install @ngx-translate/[email protected] --save

npm remove @ngx-translate/http-loader --save
npm install @ngx-translate/[email protected] --save

2. Dosyaların Hazırlanması

Uygulamamızın olduğu klasörde bulunan, tüm işlemlerimizi gerçekleştirdiğimiz src klasöür altında yer alan assets klasörü altına i18n adında bir klasör oluşturuyoruz.

{uygulamanın olduğu klasör}\src\assets\i18n\

Bu klasörün altında ise eklemek istediğimiz dillerin kodları ile json dosyaları ekliyoruz. Örneğin İngilizce için en.json, Türkçe için tr.json dosyalarını oluşturuyoruz.

en.json

{
  "lng_welcome":"Welcome",
  "lng_home":"Home Page",
  "lng_login":"Login",
  "lng_html":"Hello <strong>World</strong>"
}

tr.json

{
  "lng_welcome":"Hoşgeldiniz",
  "lng_home":"Anasayfa",
  "lng_login":"Login",
  "lng_html":"Merhaba <strong>Dünya</strong>"
}

bu şekilde istediğiniz kadar dil ekleyebilirsiniz.

3. Module Eklenmesi

Yine src klasörü altında bulunan uygulamamızın ana kodlarını oluşturan app klasörü altındaki app.module.ts dosyasına aşağıdaki satırları ekliyoruz.

app/app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

...
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}
...
@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
  ]
})

Dosya örnek uygulamada şu şekilde gözükmesi lazım

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// eklenecek modüller
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';



// eklenecek fonksiyon
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
// eklenecek importlar
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
// eklenecek importların sonu
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

4. Component Eklenmesi

Aynı klasörde bulunan /src/app/app.component.ts dosyasına da aşağıdaki satırları ekleyelim

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';

import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// eklenecek import
import { TranslateService } from '@ngx-translate/core';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public translate: TranslateService
 // bu değişkeni ekleyin
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Welcome', component: HomePage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    
    // bu satırları ekleyin
    this.translate.addLangs(['en', 'tr']);
    this.translate.setDefaultLang('tr');

    const browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/en|tr/) ? browserLang : 'tr');
    // buraya kadar
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }
}

5. Kullanımı

Örnekteki json dosyasına istinaden şu şekilde kullanabilirsiniz.

<h1>{{ 'lng_welcome' | translate }}</h1>
<p><a (click)="goToHome()">{{ 'lng_home' | translate }}</a></p>
<p [innerHTML]="'lng_html' | translate"></p>