Функция getTranslation ngx-translate не слушает наблюдаемые изменения - PullRequest
Новая
       46

Функция getTranslation ngx-translate не слушает наблюдаемые изменения

0 голосов
/ 27 февраля 2020

Я создаю пользовательский Angular ngx-translate Loader, который пытается получить переводы из локального хранилища, перед тем как выполнить вызов API и обновить локальное хранилище новыми переводами.

Вот моя getTranslation функция: 

    getTranslation(lang: string): Observable<any> {
        // get translations from local storage
        const translations = new BehaviorSubject(
            JSON.parse(this.localStorageService.getItem('translations'))
        );

        // get translations from API
        this.myApiService.get('/translations/' + lang).subscribe(response => {
            if (response.data) {
                // update local Storage with new translations
                this.localStorageService.setItem('translations', JSON.stringify(response.data));
                translations.next(response.data);
            }
        });

        return translations;
    }

Проблема в том, что getTranslation, похоже, не обновляет Observable на translations.next() и продолжает использовать переводы, которые были изначально установите 

const translations = new BehaviorSubject(
     JSON.parse(this.localStorageService.getItem('translations'))
);

до перезагрузки приложения.

Что именно я здесь не так делаю?

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Таким образом, кажется, что вставить два разных значения в наблюдаемое в функции getTranslation мешает с помощью ngx-translate - хотя я нашел обходной путь.

Я не уверен, что это лучший способ чтобы сделать это, но это работает и решает мою проблему, так что я просто буду впереди go и буду его использовать.

CustomTranslateLoader: 

getTranslation(lang: string): Observable<any> {
    const translations = new BehaviorSubject(undefined);          
    translations.next(JSON.parse(this.localStorageService.getItem('translations')));
    return translations;
}

loadTranslation(lang) {
    return this.blockpitApiService.get('/translations/' + lang);
}

app.component.ts 

    constructor(
        private translate: TranslateService,
        private translateService: CustomTranslateLoader,
        private localStorageService: LocalStorageService
    ) {

        language = translate.getBrowserLang();
        translate.setDefaultLang(language);

        // load translations from server and update translations
        this.translateService.loadTranslation(language).subscribe(response => {
            this.localStorageService.setItem('translations', JSON.stringify(response.data));
            translate.setTranslation(language, response.data);
            translate.use(language);
        });
     }

Поскольку ngx-translate просто игнорирует, когда мы выполняем sh новые переводы в наблюдаемую, мы можем просто вызвать translate.setTranslation(language, response.data) и translate.use(language), чтобы обновить значения, используемые при переводе.
Вызывая это, как только наш вызов API завершен, мы первоначально видим перевод, который сначала установлен в getTranslation, который автоматически вызывает ngx-перевод, и переводы API, как только они становятся доступны, когда мы .subscribe для функции в нашем app.component.ts.

0 голосов
/ 27 февраля 2020

Не знаю, я вас точно понимаю, но я думаю, что когда вы вызываете getTranslation(), он читает json из localStorage, сохраняя в translation константы ... и после того, как вы вызываете API, но вы не обновляетесь переменная translation просто сохраняется в localalstorage .. тогда вы возвращаетесь. Таким образом, когда вы перезагружаете страницу c, она снова читает из локального хранилища, НО на этот раз есть те переводы, которые вы получаете от API в первый раз.

...