I18n Context
Overview
I18n context is designed to manage the variables from different environments which carries pseudoEnabled, i18nEnabled, preferredLanguage, and other user-scoped values, provides a way to load and share these values between services without having to explicitly pass a parameter through every level of the service. In this way, users can use this interface to modify the default behavior regardless of the development or testing phase. The storage of these variables is configurable, and the default is saved in localstorage.
import { I18nContext } from "@singleton-i18n/angular-client";
Context Attributes
| Attribute | Type | Writable | Default | Description |
|---|---|---|---|---|
| pseudoEnabled | boolean | readonly | undefined | The pseudo setting from localStorage, determine whether to show pseudo translation in debugging or developing stage. The value can be changed by localStorage, it will override the pseudo setting in i18n configs. |
| i18nEnabled | boolean | writable | undefined | The i18n enable setting from localStorage, determine whether to use Singleton features in testing or product stage. |
| preferredLanguage | string | writable | undefined | The preferred language from localStorage. |
Default storage
The default context storage is based on localstorage, which can be replaced by cookie, session storage, etc. Developers and testers can directly modify the corresponding attribute values in the localstorage to change the default behavior of the application to achieve the purpose of testing. However, this requires certain development work in the application itself. The specific development and usage scenarios will be explained in detail in the following sessions.
| Key | Description |
|---|---|
| vip.pseudoEnabled | The key in localStorage determines whether to enable pseudo. The value can be true or false. |
| vip.i18nEnabled | The key in localStorage determines whether to enable i18n. The value can be true or false. |
| vip.preferredLanguage | The key in the local storage to store the preferred language which is controlled by the application. |
Usage Scenarios
I18n feature switch
Under normal circumstances, international development is cross-release. Before the official release of the internationalization function, we need to disable the function of i18n at the code level, but in the testing and development stage, we need to debug and test i18n, so it is suitable for using context in this situation to override the default settings.
const i18nEnabled = false;
// Initialize the current state of i18n feature.
i18nContext.i18nEnabled = i18nContext.i18nEnabled || i18nEnabled;
Pseudo translation
To override the pseudo setting in the testing and development stage.
const pseudoEnabled = false;
i18nContext.pseudoEnabled = i18nContext.pseudoEnabled || pseudoEnabled;
Preferred language
It is mainly used to load the login page in the user’s preferred language before loading the user preference.
const browserLanguage: string = getBrowserCultureLang();
const currentLanguage = i18nContext.preferredLanguage ||
localeService.normalizeLanguageCode(browserLanguage);
import {
getBrowserCultureLang,
I18nContext,
LocaleService,
VIPService,
} from '@singleton-i18n/angular-client';
// Initialize the current state of i18n feature.
const i18nEnabled = false;
i18nContext.i18nEnabled = i18nContext.i18nEnabled || i18nEnabled;
const browserLanguage: string = getBrowserCultureLang();
const currentLanguage = i18nContext.preferredLanguage || localeService.normalizeLanguageCode(browserLanguage);
localeService.init(currentLanguage);
return () => vipService.initData(I18nConfig);