ngx-translate 的 getTranslation 函数不监听 Observable 的变化

Question

我正在创建一个自定义 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 似乎没有在 translations.next() 上更新 Observable，而是继续使用最初用

设置的翻译

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

直到我重新加载我的应用程序。

我到底做错了什么？

Answer 1

我不知道，我完全理解你的意思，但我认为当你调用 getTranslation() 时，它会从 localStorage 中读取 json 保存到 translation 常量...然后你调用 api 但你没有更新 translation 变量只是保存到 localstorage.. 然后你返回。因此，当您重新加载页面 ofc 时，它会再次从本地存储中读取，但这次会翻译您第一次从 API 获得的内容。

Answer 2

所以似乎将两个不同的值推入 getTranslation 函数中的 observable 与 ngx-translate 混淆 - 不过我找到了解决方法。

我不确定这是否是最好的方法，但它有效并解决了我的问题，所以我将继续使用它。

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 会简单地忽略，我们可以简单地调用 translate.setTranslation(language, response.data) 和 translate.use(language)，以更新翻译时使用的值。
通过在我们的 api 调用完成后立即调用它，我们最初会看到首先在 getTranslation 中设置的翻译，其中 ngx-translation 会自动调用，而 api 翻译会在 api 中自动调用当我们 .subscribe 到 app.component.ts.

中的函数时可用

ngx-translate 的 getTranslation 函数不监听 Observable 的变化

ngx-translate's getTranslation function doesn't listen to Observable changes

javascript

internationalization

ngx-translate

angular