@@ -310,6 +310,49 @@ To change it, implement the `L10nTranslationFallback` class-interface.
310
310
By default, the library only parse the _ params_ . ` L10nTranslationHandler ` is the class-interface to implement to modify the behavior.
311
311
#### Missing Translation Handler
312
312
If a key is not found, the same key is returned. To return a different value, you can implement the ` L10nMissingTranslationHandler ` class-interface.
313
+ #### Loader
314
+ If you need to preload some data before initialization of the library, you can implement the ` L10nLoader ` class-interface:
315
+ ``` TypeScript
316
+ @Injectable () export class AppLoader implements L10nLoader {
317
+ constructor (private translation : L10nTranslationService ) { }
318
+
319
+ public async init(): Promise <void > {
320
+ await ... // Some custom data loading action
321
+ await this .translation .init ();
322
+ }
323
+ }
324
+
325
+ @NgModule ({
326
+ imports: [
327
+ L10nTranslationModule .forRoot (
328
+ l10nConfig ,
329
+ {
330
+ loader: AppLoader
331
+ }
332
+ ),
333
+ ],
334
+ })
335
+ ```
336
+ or if you are using ` L10nRouting ` :
337
+ ``` TypeScript
338
+ @Injectable () export class AppRoutingLoader implements L10nLoader {
339
+ constructor (private routing : L10nRoutingService , private translation : L10nTranslationService ) { }
340
+
341
+ public async init(): Promise <void > {
342
+ await ... // Some custom data loading action
343
+ await this .routing .init ();
344
+ await this .translation .init ();
345
+ }
346
+ }
347
+
348
+ @NgModule ({
349
+ imports: [
350
+ L10nRoutingModule .forRoot ({
351
+ loader: AppRoutingLoader
352
+ })
353
+ ],
354
+ })
355
+ ```
313
356
314
357
### Validation
315
358
There are two directives, that you can use with Template driven or Reactive forms: ` l10nValidateNumber ` and ` l10nValidateDate ` . To use them, you have to implement the ` L10nValidation ` class-interface, and import it with the validation module:
@@ -452,28 +495,21 @@ export const l10nConfig: L10nConfig = {
452
495
If you need to preload some translation data, for example to use for missing values, ` L10nTranslationService ` exposes the translation data in the ` data ` attribute. You can merge data by calling the ` addData ` method:
453
496
454
497
``` TypeScript
455
- export function l10nPreload(translation : L10nTranslationService , translationLoader : L10nTranslationLoader ): () => Promise <void > {
456
- return () => new Promise ((resolve ) => {
457
- translationLoader .get (' en-US' , { name: ' app' , asset: ' ./assets/i18n/app' , options: { version: ' 1.0.0' } })
458
- .subscribe ({
459
- next : (data ) => translation .addData (data , ' en-US' ),
460
- complete : () => resolve ()
461
- });
462
- });
498
+ @Injectable () export class AppLoader implements L10nLoader {
499
+ constructor (private translation : L10nTranslationService , private translationLoader : L10nTranslationLoader ) { }
500
+
501
+ public async init(): Promise <void > {
502
+ await new Promise ((resolve ) => {
503
+ this .translationLoader .get (' en-US' , { name: ' app' , asset: ' ./assets/i18n/app' , options: { version: ' 1.0.0' } })
504
+ .subscribe ({
505
+ next : (data ) => this .translation .addData (data , ' en-US' ),
506
+ complete : () => resolve (null )
507
+ });
508
+ });
509
+ await this .translation .init ();
510
+ }
463
511
}
464
512
```
465
- Then add the function to providers:
466
- ``` TypeScript
467
- providers : [
468
- {
469
- provide: APP_INITIALIZER ,
470
- useFactory: l10nPreload ,
471
- deps: [L10nTranslationService , L10nTranslationLoader ],
472
- multi: true
473
- },
474
- ...
475
- ],
476
- ```
477
513
478
514
479
515
## Types
0 commit comments