Angular Transloco中ngOnInit多翻译密钥无需逐个订阅的实现方法

解决方案 #

你不需要为每个翻译密钥单独编写订阅逻辑，有多种更简洁的实现方式： #

方案1：批量订阅多个翻译密钥

Transloco 的 selectTranslate 方法支持传入密钥数组，一次订阅即可获取所有目标密钥的翻译结果：

ngOnInit() {
  // 把你需要的30个翻译密钥全部放到数组中
  const targetKeys = ['hello', 'key1', 'key2', 'key3' /* 其余27个密钥 */] as const;
  this.translocoService.selectTranslate(targetKeys, { value: 'world' })
    .subscribe(transRes => {
      // transRes是所有密钥对应翻译的对象，直接按属性取值即可
      this.helloText = transRes.hello;
      this.key1Text = transRes.key1;
      // 其余翻译赋值逻辑
    });
}

方案2：使用模板结构指令（更推荐）

如果翻译内容直接在模板中展示，直接使用 Transloco 提供的 *transloco 结构指令即可，不需要在组件类中写任何订阅逻辑，指令会自动处理翻译加载、更新和订阅销毁：

<!-- 用ng-container把需要用翻译的模板内容包起来即可 -->
<ng-container *transloco="let translate">
  <p>{{ translate('hello', { value: 'world' }) }}</p>
  <p>{{ translate('key1') }}</p>
  <!-- 剩下的28个翻译直接调用translate方法即可 -->
</ng-container>

方案3：监听翻译加载完成事件后同步翻译

如果一定要在组件类中使用同步的 translate 方法，可以监听翻译加载完成的事件，触发后再一次性调用同步方法获取所有翻译：

import { filter } from 'rxjs';

ngOnInit() {
  this.translocoService.events$
    .pipe(filter(event => event.type === 'TRANSLATION_LOAD_SUCCESS'))
    .subscribe(() => {
      // 此时翻译文件已经加载完成，直接调用同步方法即可
      this.helloText = this.translocoService.translate('hello', { value: 'world' });
      this.key1Text = this.translocoService.translate('key1');
      // 其余翻译赋值逻辑
    });
}

方案4：应用启动前预加载翻译

如果你的项目使用固定的默认语言，可以通过 APP_INITIALIZER 在应用启动前就完成翻译文件的加载，这样 ngOnInit 执行时翻译已经就绪，直接调用同步的 translate 方法即可，不需要任何订阅逻辑。 #

注意：如果在组件类中手动写订阅，记得添加销毁逻辑（比如配合 takeUntil 操作符），避免内存泄漏，使用结构指令则不需要额外处理。

内容的提问来源于stack exchange，提问作者Konstantin Schütte