How to use "provideTranslocoScope" in a service?

186 Views Asked by At

I'm using Transloco in an angular project. Transloco provides a way to add scopes into the existing TranslocoService using the provideTranslocoScope function.

This works well on modules and components, but I would like to use scopes in services. The problem I faced is that while you can add extra providers on components and modules, I see no documentation to do it on services.

What I wish to be able to do is something like that:

const loader = { fr: async () => ({ hello: 'Bonjour' }) };

@Injectable({
  providedIn: 'root',
  deps: [provideTranslocoScope({ scope: 'aScope', loader: loader })] //not working
})
export class MyTranslateScopeService {
  constructor(translocoService: TranslocoService) {
    console.log(translocoService.translate('hello', undefined, 'aScope')); // should print Bonjour"
  }
}

My understanding is that I should provide the translocoScope into a module itself providing the "MyTranslateScopeService" but doing so will add an extra layer of complexity that I wish I could avoid. In any way, if I do not provide the scope at some point before using the TranslocoService, transloco is unlikely to have that scope loaded. I'm doing this because I would like to lazy load the scope when and only when the service itself is lazy loaded.

Is there another easy way to achieve the same without a module ?

[EDIT] a possible way is to add a translation scope without going through a provider. This can be achieved using setTranslation()

0

There are 0 best solutions below