Setting another value for a translation key should be updated

rabr2ro commented 8 years ago

I'm submitting a ... (check one with "x")

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior

From what I could see, translations member, within TranslationService, for a specific language, is not a dictionary but an object tree. For example:

translations[EN] = {
    'user': {
         'firstName': 'First Name',
         'lastName': 'Last Name'
    }
}

so, to use one of the keys in the pipe, you simply write

{{ 'user.firstName' | translate }}

The signature for setting another value for one of the key is:

public set(key: string, value: string, lang: string = this.currentLang): void

so, if one wants to change from code the value of the firstName, would inject TranslationService and do

this.translationService.set('user.firstName', 'Only Name')

but the current implementation is not having the desired result, because, after executing the previous set, the translations object inside TranslatonService will look like this:

translations[EN] = {
    'user': {
         'firstName': 'First Name',
         'lastName': 'Last Name'
    },
    'user.firstName': 'Only Name'
}

So, either I do not use correctly the set method, in which case the documentation should be updated, or it's internal implementation should be updated

this.translations[lang][key] = value;

Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:btpW3l0jr5beJVjohy1Q).

Please tell us about your environment:

ng2-translate version: 2.4.2
Angular version: 2.0.0-rc.5
Browser: [ Chrome XX | Firefox XX ]
Language: [ TypeScript 1.8 ]

ocombe commented 8 years ago

Good point, I'll have to fix that :)

rabr2ro commented 8 years ago

Thank you. I have a possible implementation for the problem, but it's in my own service that is a wrapper for the TranslationService. If you want, I can put here the code that I have (is TypeScript), you can take a look and you can refine it and included in the TranslationService implementation. Let me know if you would like to see what I have.

ocombe commented 8 years ago

sure, that would help, thanks

rabr2ro commented 8 years ago

Ok. So here it is:

private set(key: string, value: string): void {
        let translations: any = (<any>this._translationService).translations[this._translationService.currentLang];
        let path: string[] = key.split('.');
        this.setDeepValue(translations, value, path);

        this._translationService.onTranslationChange.emit(<TranslationChangeEvent>{
            translations: translations,
            lang: this._translationService.currentLang
        });
    }

private setDeepValue(obj: any, value: any, path: string[]): void {
        if (path.length > 1) {
            let fragment: string = path.shift();
            if (obj[fragment] == null || typeof obj[fragment] !== 'object') {
                obj[fragment] = {};
            }
            this.setDeepValue(obj[fragment], value, path);
        } else {
            obj[path[0]] = value;
        }
    }

where this is the instance of my wrapper service, which has TranslationService injected as _translationService member. I had to do a cast to any, so that I can address internal translations member, within the service. setDeepValue it's an adaptation of a function that I found on StackOverflow :)