在组件中使用 ngx-translate答案

【问题标题】：Use ngx-translate in component在组件中使用 ngx-translate
【发布时间】：2020-08-03 12:59:18
【问题描述】：

我正在使用 ngx-translate 在视图中没有问题，使用管道。我需要做的是在组件中使用它，例如显示错误消息，或定义数据表列默认内容。

我正在尝试做类似的事情：

translate.instant("AREA.NEW");

或

translate.get("AREA.NEW").subscribe((res: string) => {
    console.log(res);
});

我尝试在 ngOnInit() 和 ngAfterViewInit() 中调用它

但在这两种情况下，我只得到“AREA.NEW”，而不是翻译后的词。我假设 json 字典是在我调用之后加载的，所以我不知道它是如何工作的。

【问题讨论】：

如果找到“AREA.NEW”，则 translate.get() observable 中的 subscibe 应该给出值。 console.log(res) 是否仍返回 AREA.NEW？如果是这样，请验证它是否真的在您的交易定义中定义？
你能发布整个代码吗？调用 TranslateService 的导入、注入和方法。
我会试试的。 @FetraR。它已定义。如果执行 $(document).ready 并在其中包含上述任何选项，它会显示正确的翻译（在加载 json 之后）。
对我来说，这在 ngoninit 中使用 get + subscribe 有效。如果翻译中不存在密钥，它只会返回密钥而不进行翻译。

标签： javascript angular ngx-translate

【解决方案1】：

导入 TranslateService 并在任何地方使用它。

import { TranslateService } from '@ngx-translate/core';

export class YourComponent {
  constructor(private translateService: TranslateService) {
    console.log('translation', this.translateService.instant('my_i18n_json_defined_key'));
  }
}

【讨论】：

【解决方案2】：

成功了。

constructor(private readonly translateService: TranslateService) { }

ngOnInit() {
    this.translateService.get(['']).subscribe(translations => {
        console.info(this.translateService.instant('key1'));
        console.info(this.translateService.instant('key2'));
        console.info(this.translateService.instant('key3'));
    });
}

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。