loclapp / locl

Internationalization (i18n) tools suite for Angular
https://www.locl.app
GNU Affero General Public License v3.0
92 stars 16 forks source link

Translate in component ts with a variable id #28

Open harfyt opened 4 years ago

harfyt commented 4 years ago

Hello, and thanks for this library.

I'm trying to get a translation in typescript with a variable id.

Using $localize`:@@${my_key}:` doesn't work so I was wondering if there is any workaround.

The way I load translations is the following:

getTranslations('/assets/i18n/' + lang + '.json').then(
        (data: ParsedTranslationBundle) => {
            loadTranslations(data.translations);
            // Dynamic Import of Angular Locale strings (eg for date pipe)
            import(
                /* webpackInclude: /(en|el|fr|de|it|ru|es|pt)\.js$/ */
                '@angular/common/locales/${lang}').then(lng => registerLocaleData(lng.default));
            platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
                // Ensure Angular destroys itself on hot reloads.
                if (window['ngRef']) {
                    window['ngRef'].destroy();
                }
                window['ngRef'] = ref;
                // Otherwise, log the boot error
            }).catch(err => console.error(err));
        }
    ); 
ocombe commented 4 years ago

Hello! Yeah that use case isn't working right now. If you use custom ids, you should be using a string, anything variable wouldn't work with $localize right now unfortunately. What's your use case that is requiring a dynamic id?

harfyt commented 4 years ago

Hello! Yeah that use case isn't working right now. If you use custom ids, you should be using a string, anything variable wouldn't work with $localize right now unfortunately. What's your use case that is requiring a dynamic id?

My API in some cases return data with keys of translation json file. So I need to translate it at runtime.

A workaround that I came up with is to store initially translations in window object but it's not elegant.

window['mytranslations'] = data.translations;