Firebase ile Angular ngx-translate kullanımı

Selam dostlar,

Angular ile çalışıyor olmalısınız ki yazıma denk geldiniz, ngx-translate eklentisini Firebase veritabanı ile nasıl kullanabileceğimizi göstereceğim.

Ngx-translate kurulumu

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

Üstte vermiş olduğum link üzerinden ngx-translate kütüphanesini Angular projemize kuruyoruz.

Firebase realtime database üzerinden verileri çekebileceğimiz bir servis oluşturacağız.

firebase-translate-load.service.ts

import { TranslateLoader } from '@ngx-translate/core';
import { AngularFireDatabase } from 'angularfire2/database';

export class FirebaseTransLoader implements TranslateLoader {
    constructor(private _db: AngularFireDatabase) { }
    public getTranslation(lang: string, prefix: string = 'translations/'): any {
        return this._db.object(`${prefix}${lang}`).valueChanges();
    }
}

environment.ts

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'apiKey',
    authDomain: 'domain.firebaseapp.com',
    databaseURL: 'https://domain.firebaseio.com',
    projectId: 'projectName',
    storageBucket: 'projectName.appspot.com',
    messagingSenderId: 'randomId',
    appId: 'appId',
    measurementId: 'privateId'
  }
};

App modül içinde firebase bağlantınızı yaptığınızdam emin olunuz.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { FirebaseTransLoader } from './shared/firebase-trans-loader';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

export function FbTransLoaderFactory(db: AngularFireDatabase) {
  return new FirebaseTransLoader(db);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule, 
    TranslateModule.forRoot({
      loader: { 
                provide: TranslateLoader, 
                useFactory: FbTransLoaderFactory, 
                deps: [AngularFireDatabase] 
              }
    })
  ],
  providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { Title } from '@angular/platform-browser';

import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as _ from 'lodash';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
    selectedLanguage: any;
    languages: any;

    // Private
    private _unsubscribeAll: Subject<any>;

    /**
     * Constructor
     * @param {TranslateService}              :_translateService
     * @param {Title}                         :_title
     */
    constructor(
        private _translateService: TranslateService,
        private _title: Title,
    ) {
        // Dil ekle
        this._translateService.addLangs(['tr', 'en']);

        // Varsayılan dili belirle
        this._translateService.setDefaultLang('tr');

        // Dili kullan
        this._translateService.use('tr');

        this.languages = [
            {
                id: 'tr',
                title: 'Turkish',
                flag: 'tr'
            },
            {
                id: 'en',
                title: 'English',
                flag: 'us'
            }
        ];

        this.appComponentLoading();
    }

    /**
     * On Init
     */
    ngOnInit(): void {

        // Set the selected language from default languages
        this.selectedLanguage = _.find(this.languages, { 
        id: this._translateService.currentLang });

    }

    /**
     * On destroy
     */
    ngOnDestroy(): void {

        // Tüm abonelikleri temizle
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }

    private appComponentLoading(): void {

        /**
         * Translator title change bug fix
         */
        this._translateService.onLangChange.subscribe((event: LangChangeEvent) => {
            this._translateService.get('title').subscribe(name => {
                this._title.setTitle(name);
            });
        });
    }

/**
     * Dili ayarla/değiştir
     *
     * @param lang
     */
    setLanguage(lang: { id: string; }): void {

        // Dil değiştirme butonu için değişim
        this.selectedLanguage = lang;

        // Translator için gerekli değişim.
        this._translateService.use(lang.id);
    }
}

app.component.html

 <ul>
     <li *ngFor="let lang of languages" (click)="setLanguage(lang)">                                          
         <img src="assets/icons/flags/{{lang.flag}}.png" alt="{{lang.title}}">
         <span class="iso">{{lang.title}}</span>
     </li>
</ul> 

Translate kullanımı ise, pipe aracılığı ile oluyor.

Her nerede kullanıyor olursanız olun, pipe kullanmak zorundasınız.
Ayrıca, çevirinin okunduğu değişken tek tırnak arasında yazılmaktadır.

‘menu.cikis-yap’ | translate
Örneğinden anlayabilirsiniz.

<span>{{'menu.cikis-yap' | translate}}</span>
<span>{{'title' | translate}}</span>
<span themeTitle="{{'menu.cikis-yap' | translate}}"></span>
// themeTitle temanıza özel bir attr olabilir. örnek olarak eklemek istedim.

Eğer bu kodları kullandığınız halde bir problem yaşıyorsanız, yorum olarak aldığınız hatayı gönderebilirsiniz. Size çözüm konusunda yardımcı olacağım.

2 Comments

  1. Hi Dear,

    Is this guide applicable to ionic4 projects?

    I want to localize my app using firebase database to get the required string language as selected by user.

    thanks.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir