Call translateI18Next.init({ ... }) with the options you want to initialize i18next with.
You can also pass the special options use and defaultUse which are each Arrays that may contain "plugins" such as a cache or backend you wish to use. See .use method of i18next.
The default plugins for defaultUse are [i18nextXHRBackend, browserLanguageDetectorCtor]
browserLanguageDetector:injectableCustomLanguageDetectorService,// optional - the specific application language detector (allows you to return the language of the user.
// If it is absent, the service uses default "angular2 locale detector" behaviour using LOCALE_ID.
// supportedLanguages: ['en', 'pt'], // Therefore you can pass the optional supportedLanguages parameter which indicates your supported languages.
// For example, LOCALE_ID = 'en-AU' or 'en-US' or 'en', you can pass only ['en'] -> locales/en/translation.json
// LOCALE_ID = 'pt-BR' or 'pt', you can pass only ['pt'] -> locales/pt/translation.json
backend:injectableBackendConfigFactory// optional - allows to change "loadPath" i18next parameter
}).then(()=>{
this.viewReady=true;
});
}
}
app.html
<div *ngIf="viewReady" [innerHTML]='"<span style=\"color:red;\">You have {count} apple</span>" | translate:{count: appleCount}'></div>
src/locales/en/translation.json
{
"<span style=\"color:red;\">You have {count} apple</span>":"<span style=\"color:red;\">You have {count} apple</span>",
"<span style=\"color:red;\">You have {count} apple</span>_plural":"<span style=\"color:red;\">You have {count} apples</span>"
}
src/locales/ru/translation.json
{
"<span style=\"color:red;\">You have {count} apple</span>":"<span style=\"color:green;\">У вас есть одно яблоко</span>",
"<span style=\"color:red;\">You have {count} apple</span>_2":"<span style=\"color:blue;\">У вас есть {count} яблока</span>",
"<span style=\"color:red;\">You have {count} apple</span>_5":"<span style=\"color:yellow;\">У вас есть {count} яблок</span>"
}
I18nModule.ts (the localized constants at the typescript files)