feat(transloco): allow to provide multiple scopes via `provideTranslo…

…coScopes`
jsverse · Apr 19, 2024 · a016d48 · a016d48
1 parent 3be3f48
commit a016d48
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/apps/transloco-playground/src/app/lazy-multiple-scopes/lazy-multiple-scopes.component.ts b/apps/transloco-playground/src/app/lazy-multiple-scopes/lazy-multiple-scopes.component.ts
@@ -7,8 +7,7 @@ import { TranslocoModule, provideTranslocoScope } from '@jsverse/transloco';
   templateUrl: './lazy-multiple-scopes.component.html',
   styleUrls: ['./lazy-multiple-scopes.component.scss'],
   providers: [
-    provideTranslocoScope({ scope: 'admin-page', alias: 'AdminPageAlias' }),
-    provideTranslocoScope({ scope: 'lazy-page', alias: 'LazyPageAlias' }),
+    provideTranslocoScope({ scope: 'admin-page', alias: 'AdminPageAlias' }, { scope: 'lazy-page', alias: 'LazyPageAlias' }),
   ],
   standalone: true,
   imports: [TranslocoModule],

diff --git a/docs/docs/lazy-load/scope-configuration.mdx b/docs/docs/lazy-load/scope-configuration.mdx
@@ -45,6 +45,21 @@ export const TODO_ROUTES: Route = {
 
 ```
 
+We also can provide several scopes at once: 
+
+```ts title="core.module.ts"
+import { Route } from '@angular/router';
+import {provideTranslocoScope} from "./transloco.providers";
+
+export const TODO_ROUTES: Route = {
+    path: '',
+    loadComponent: () => import('./todos.component').then((TodosComponent) => TodosComponent),
+    providers: [
+      provideTranslocoScope('todos', { scope: 'shared', alias: 'sharedAlias' }),
+    ],
+};
+```
+
 </TabItem>
 
 <TabItem value="NgModule">

diff --git a/libs/transloco/src/lib/transloco.providers.ts b/libs/transloco/src/lib/transloco.providers.ts
@@ -76,12 +76,12 @@ export function provideTranslocoLoader(loader: Type<TranslocoLoader>) {
   ]);
 }
 
-export function provideTranslocoScope(scope: TranslocoScope) {
-  return {
+export function provideTranslocoScope(...scopes: TranslocoScope[]) {
+  return scopes.map((scope) => ({
     provide: TRANSLOCO_SCOPE,
     useValue: scope,
     multi: true,
-  };
+  }));
 }
 
 export function provideTranslocoLoadingTpl(content: Content) {