Angular ngOnInit() 中的 Transloco 用法

Question

我知道下面的代码是行不通的，因为翻译文件en.json还没有加载，当ngOnInit()被调用时：

component.ts

ngOnInit() {
  console.log(this.translocoService.translate('hello', { value: 'world' }););
}

en.json

{
  "hello": "Hello",
}

另一种方法是订阅：

ngOnInit() {
  this.translocoService.selectTranslate('hello', { value: 'world' }).subscribe(value => console.log(value));
}

但是在我的组件中，我有 30 个键需要翻译。我真的应该订阅所有 30 个密钥吗？

演示： https://stackblitz.com/edit/ngneat-transloco-8xqjqm?file=src%2Fapp%2Fapp.component.ts

Answer 1

我认为你应该组织你的 JSON 翻译文件，使其具有包含你的组件所需的所有 30 个翻译的父属性（我们称父属性为 parentAttribute，但找到一个更好的姓名 ;)) :

{
  "parentAttribute": {
    "child1": "translation1"
    ...
    "child30": "translation30"
  }
}

那么，你应该使用translateObjectmethod转车服务：

const translations = this.translocoService.translateObject('parentAttribute');

translations 变量应包含：

{
    "child1": "translation1"
    ...
    "child30": "translation30"
}

Answer 2

不确定我是否正确理解了您的需求，但 AfterViewInit 可能是适合您的生命周期钩子吗？至此，transloco 已加载翻译文件，您无需再订阅。

Answer 3

您可以订阅事件对象，它会在加载语言文件时触发。 See the documentation

ngOnInit() { // or even constructor

  this.translocoService.events$.subscribe(
    (event: TranslocoEvents) => {
      if (event.type === 'translationLoadSuccess') {

        console.log(this.translocoService`enter code here`.translate('hello', { value: 'world' }););
        // Do translation stuff

      }
    });

}

Answer 4

现在我找到了一个更好的解决方案：https://ngneat.github.io/transloco/docs/recipes/prefetch/#prefetch-the-user-language

我现在使用 APP_INITIALIZER 在应用程序初始化之前预加载翻译文件。这样翻译总是可用的，在组件的构造函数中也是如此。

不幸的是，这种方法嵌套在 Transloco 文档中，很容易被忽视。

Angular ngOnInit() 中的 Transloco 用法

Angular Transloco usage in ngOnInit()

angular

transloco