Hack the Library
In Transloco, you can extend and customize its behavior through several mechanisms: the loader, interceptor, missing handler, and fallback strategy. These tools allow you to control how translations are loaded, how translation data is processed before it's saved, how missing keys are handled, and how fallback languages are selected when the primary language fails to load.
This flexibility ensures that you can tailor Transloco to meet the specific needs of your application, whether you need to load translations from custom sources, manipulate translation data, or handle missing translations in a way that suits your use case.
Below are explanations and examples of how to implement and customize these features.
The Loader
The loader allows you to override the default behavior of loading translation files.
import { TranslocoLoader } from '@jsverse/transloco';
export class CustomLoader implements TranslocoLoader {
getTranslation(lang: string) {
if (langInLocalStorage) {
return of(langFromStorage);
}
return ...; // Handle translation loading for other cases
}
}
The Interceptor
The interceptor gives you the ability to manipulate the translation object before it is saved by the service.
import { TranslocoInterceptor } from '@jsverse/transloco';
export class CustomInterceptor implements TranslocoInterceptor {
preSaveTranslation(translation: Translation, lang: string): Translation {
return translation; // Modify translation object before saving
}
preSaveTranslationKey(key: string, value: string, lang: string): string {
return value; // Modify translation key-value pair before saving
}
}
Missing Handler
The missing handler is responsible for handling missing keys. By default, it logs a warning in the console when config.isProdMode
is set to false
and returns an empty string for missing key values.
import { TranslocoMissingHandler } from '@jsverse/transloco';
export class CustomHandler implements TranslocoMissingHandler {
handle(key: string, config: TranslocoConfig) {
return '...'; // Provide a custom fallback for missing translation keys
}
}
Fallback Strategy
The fallback strategy is responsible for loading a fallback translation file if the selected active language fails to load. By default, it loads the language set in config.fallbackLang
and uses it as the new active language.
If you need more control, you can define your own strategy:
import { TranslocoFallbackStrategy } from '@jsverse/transloco';
export class CustomStrategy implements TranslocoFallbackStrategy {
getNextLangs(failedLang: string) {
return ['...']; // Return an array of fallback languages to load
}
}
The getNextLangs
method is called with the failed language and should return an array of languages to load, in order of preference.
Last updated
Was this helpful?