在组件中使用 ngx-translate

Question

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

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

translate.instant("AREA.NEW");

或者

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

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

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

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

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

Answer 3

“即时”翻译不起作用的另一个原因可能是翻译在需要时不可用。 当使用以异步方式从翻译文件加载的 TranslateHttpLoader（此处示例）加载翻译时，可能会发生这种情况。

此处显示了克服此问题的一个技巧（刚刚测试并在 Angular 13+ 中工作）并通过在其路由上添加一个特殊的解析器强制组件等待直到转换准备就绪：

解析器

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){ }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
        return this.translate.get("does.not.matter"); 
    }
}

路由使用

{path: "segment", component: YourComponent, resolve: {model: TranslationLoaderResolver}