Ana içeriğe geç

2.1.1 Bundle Hazırlama ve Kullanım#

Translate yeteneği bir i18n kütüphanesi olan https://github.com/ngx-translate/core kullanılarak sağlanmıştır.

**Bundle Hazırlama **

Bundle dosyaları json formanında key-value içerik tutan dosyalardır. Bu dosyalar uygulamanın belirlenen assets->i18n klasörü altında yer alır. Dosyalar modül düzeyinde klasörlendikten sonra, uygulama bünyesinde verilecek dil desteği kadar çoğaltılır. Örn:

Modül Import ve Factory Tanımlama

Uygulama base modulü (app-module) için :

 TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: ModuleHttpLoaderFactory,
        deps: [HttpClient],
    },
    isolate: false,
    extend: true,
})

Translate module import edilir. Dikkat edilmesi gereken husus modulün forRoot ile eklenmesi gerektiğidir. isolate false tanımlaması ile parent->child translation aktarılabilir iken extend true ile child, parent'tan gelen translation'ı kabul eder. Burada kullanılan factory ise uygulama temasından gelen componentlerin(menu, topbar vb.) bundle tanımlamasının yapıldığı yerdir. Ayrıca domain dahilinde ortak kullanılan bundle'lar da burdan tanımlanabilir.

export function ModuleHttpLoaderFactory(http: HttpClient) {
    return new MultiTranslateHttpLoader(http, [
        {prefix: './assets/i18n/keysys/', suffix: '.json'},
        {prefix: './assets/i18n/keysys-menu/', suffix: '.json'},
        {prefix: './assets/i18n/common/', suffix: '.json'},
        {prefix: './assets/i18n/ui-shared/', suffix: '.json'},
        {prefix: './assets/i18n/messages/', suffix: '.json'},
        {prefix: './assets/i18n/toast/', suffix: '.json'},
        {prefix: './assets/i18n/form-message/', suffix: '.json'},
        {prefix: './assets/i18n/setting/', suffix: '.json'}
    ]);
}

**Lazy load modules **#

Lazy modüllerin bundle'ları, ilgili modül browser'dan talep edildiğinde yüklenmektedir. Bu sayede sistemdeki tüm bundle'lar değil sadece kullanıcının gezdiği sayfaların bundle'ları kullanıcıya iletilmektedir.

TranslateModule.forChild({
    loader: {
        provide: TranslateLoader,
        useFactory: ProfileHttpLoaderFactory,
        deps: [HttpClient],
    },
    isolate: false,
    extend: true,
})

Translate modül lazy load modüllere forChild metodu ile import edilir. Burada kullanılan factory ise, ilgili modül içerisinde kullanılan bundle'ları içermektedir.

export function ProfileHttpLoaderFactory(http: HttpClient) {

    return new MultiTranslateHttpLoader(http, [
        {prefix: './assets/i18n/profile/', suffix: '.json'},
        {prefix: './assets/i18n/profile-detail/', suffix: '.json'},
        {prefix: './assets/i18n/role/', suffix: '.json'},
        {prefix: './assets/i18n/role-group/', suffix: '.json'},
        {prefix: './assets/i18n/user/', suffix: '.json'},
        {prefix: './assets/i18n/user-detail/', suffix: '.json'}
    ]);
}

Dikkat

Lazy load modüllerde translate, bundle'ların yüklenebilmesi için current loader'ın mevcut language bilgisi ile use metodu kullanarak aktif edilmesi gerekmektedir. Bu kod tekrarının önüne geçmek için abstract class'lar olan HvlAbstractOperationalForm, HvlAbstractLazyList, HvlAbstractList vb. superClass'lar da bu kod çalıştırılmaktadır. Tek yapılması gereken : 

constructor(
..., public translateService:TranslateService,
    public configurationService: ConfigurationService,
    public languageService: HvlLanguageService,
) { 
    super(translateService, configurationService, languageService); 
}
component içinde tanımlamanın yapılmasıdır.