Angular 翻译服务有时不起作用

Question

我有一个使用 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);
}

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

我认为

TranslateService

依赖于 HTTP 请求，这可能就是它有时只能工作的原因。

我该如何解决这个问题？

Answer 1

订阅里面的代码，不会等待订阅下面的代码，因为前面是异步的，下面是同步的，所以你需要移动订阅里面的代码，以获得一致的结果。

同步与异步 JavaScript – 调用堆栈、Promises 等

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);
    });
    
}