代码之家 › 专栏 › 技术社区 › Guilherme Santana

Angular翻译服务有时不起作用

ngx-translate translation internationalization angular

1

Guilherme Santana · 技术社区 · 11 月前

我有一个使用Angular 16.1.1的项目,需要翻译TypeScript代码中的一些单词。我使用ngx-translate,并编写了以下代码:

constructor(public translate: TranslateService) { this.setTranslation(); }

setTranslation(): void {
    this.translate.use('en-US');

    this.translate.get('Example').subscribe(ex => {
        this.foo = this.translate.instant(ex);

        this.bar = this.translate.instant('Anything'); 

        console.log(this.foo + ' ' + this.bar);

    });
}

我的问题是,这段代码有时会正确翻译标签,有时则不会。我注意到,如果在.translate.use('en-US')之后添加延迟,代码在95%的时间里都能正常工作,但当我在较慢的互联网连接下加载页面时,它仍然无法工作。

我认为 TranslateService 依赖于HTTP请求,这可能就是为什么它有时只起作用。

我该如何解决这个问题?

编辑 :我注意到问题是有时候我打电话的时候 translate.use 然后 translate.get ,似乎语言没有及时更新,翻译是基于之前设置的语言进行的

1 回复 | 直到 11 月前

1

Naren Murali 11 月前

更新:

根据the ngx-translate/core github ,the use 方法返回一个observable,因此您需要首先执行observable命令,然后使用switchMap切换到内部observable函数,最后执行订阅中的逻辑。

constructor(public translate: TranslateService) { this.setTranslation(); }

setTranslation(): void {
    this.translate.use('en-US').pipe(
        switchMap(() => this.translate.get('Example')),
    ).subscribe(ex => {
        this.foo = this.translate.instant(ex);

        this.bar = this.translate.instant('Anything'); 
        console.log(this.foo + ' ' + this.bar);
    });
    
}

订阅内的代码不会等待订阅下的代码,因为第一个是异步的,底部是同步的,所以你需要在订阅内移动代码,以获得一致的结果。

Angular翻译服务有时不起作用

更新:

Synchronous vs Asynchronous JavaScript â Call Stack, Promises, and More

Synchronous vs Asynchronous JavaScript â Call Stack, Promises, and More