如何在Angular服务中使用provideTranslocoScope？

provideTranslocoScope仅支持在模块或组件的提供者配置中使用，无法直接在@Injectable的deps数组中生效。要实现服务懒加载时才加载对应作用域翻译的需求，无需依赖模块配置，有两种简便方案：

方案一：手动加载并设置翻译（自定义加载逻辑） #

直接在服务内部调用setTranslation方法，手动加载并注入指定作用域的翻译内容，完全脱离模块配置：

const scopeLoader = { 
  fr: async () => ({ hello: 'Bonjour' }),
  en: async () => ({ hello: 'Hello' })
};

@Injectable({
  providedIn: 'root'
})
export class MyTranslateScopeService {
  constructor(private translocoService: TranslocoService) {
    this.initScopeTranslations();
  }

  private async initScopeTranslations() {
    const activeLang = this.translocoService.getActiveLang();
    // 仅加载当前激活语言的翻译内容
    const translations = await scopeLoader[activeLang]();
    // 将翻译绑定到指定作用域
    this.translocoService.setTranslation(translations, activeLang, 'aScope');
    
    // 作用域翻译就绪后执行翻译操作
    console.log(this.translocoService.translate('hello', undefined, 'aScope'));
  }
}

方案二：利用Transloco内置的loadScope方法 #

如果你的Transloco版本支持loadScopeAPI，可以直接调用该方法手动加载作用域，无需在服务提供者中额外配置：

步骤1：全局注册作用域加载器（可选，若需复用加载逻辑） #

在transloco-root.module.ts的全局配置中注册作用域的加载器：

export const translocoConfig: TranslocoConfig = {
  availableLangs: ['en', 'fr'],
  defaultLang: 'en',
  scopes: {
    'aScope': {
      fr: () => import('./i18n/aScope/fr.json'),
      en: () => import('./i18n/aScope/en.json')
    }
  }
};

步骤2：在服务中手动加载作用域 #

@Injectable({
  providedIn: 'root'
})
export class MyTranslateScopeService {
  constructor(private translocoService: TranslocoService) {
    this.loadScope();
  }

  private async loadScope() {
    // 加载指定作用域，自动匹配当前激活语言
    await this.translocoService.loadScope('aScope');
    console.log(this.translocoService.translate('hello', undefined, 'aScope'));
  }
}

两种方案均能实现服务懒加载时才触发作用域翻译加载的需求：方案一适合完全自定义加载逻辑的场景，方案二更贴合Transloco的原生作用域机制。

内容的提问来源于stack exchange，提问作者Flavien Volken