i am using i18n for localization of currency
i do it easily by below code and it works fine
component :
<i18n-n
:value="Price"
format="currency"
:locale="currentLocale"
></i18n-n>
But i have to pass current locale ISO code to it then i need a computed
and this is not clean way .
computed:
currentLocale() {
const current_language = this.$i18n.locale
return (this.$i18n as any).locales.find(
(item: any) => item.code === current_language
).iso
}
i want to know if there is any way to force i18n to recognize current locale ISO code internally
Related
Am using #ngx translator but I'm getting error. I need to use translator dropdown at footer and the translator should reflect in all pages
like this the services .. it works
loadTranslations(...args: Locale[]): void {
const locales = [...args];
locales.forEach(locale => {
this.translate.setTranslation(locale.lang, locale.data, true);
this.langIds.push(locale.lang);
});
// add new languages to the list
this.translate.addLangs(this.langIds);
}
setLanguage(lang) {
if (lang) {
this.translate.use(this.translate.getDefaultLang());
this.translate.use(lang);
localStorage.setItem('language', lang);
}
}
getSelectedLanguage(): any {
return localStorage.getItem('language') || this.translate.getDefaultLang();
}
and the constructor
import { locale as arLang } from './i18n/ar';
import { locale as frLang } from './i18n/fr';
constructor(private translationService: TranslationService,
) {
// register translations
this.translationService.loadTranslations(arLang, frLang);
}
For localization/internationalization of your app, angular has i18n. It handles all static text of your app and translates with any of your locale. For that you need to include equavalent translated text in $Yourlocale.xlf file.
For some reference:
Translate addition i18n
Addition in template
Add i18n tag :<div i18n>Some text</div>
Add i18n-x tag to component attribute :
<some-component i18n-titleProp="title" titleProp="some text""></some-component>
<input i18n-placeholder="placeholder"" placeholder="some text""></input>
Addition in ts file i18n-polyfill
Add i18n to class constructor :constructor(private i18n: I18n) {}
Add i18n tag to variable value :
any = [this.i18n('first value'), this.i18n('second value')]
some = this.i18n('some value')
Creation XLIFF translations files
run npm run i18n
See translation file /locales/messages.xlf
here you need to manually enter the equivalent translated text for transaltion.
We have a static site using Gatsby and contentful. Now we want to support multi-languages, with localized content from contentful. I am able to populate a graghql query:
query frontpageTeaser($lang: String) {
contentfulFrontpage(node_locale: { eq: "zh-CN" }) {
myArticalContent
...
}
}
This query is able to load the Chinese content from contentful, and English if changed to node_locale: { eq: "en-US" }.
Now the issue is: we want to support a language switch, so that when switching language, the graphql loads corresponding localized content.
We are using gatsby-plugin-react-i18next, which has this great feature:
Support multi-language url routes in a single page component. You don’t have to create separate pages such as pages/en/index.js or pages/es/index.js.
Pages like http://localhost:8000/zh-CN/ does load Chinese from local /locales/zh-CN/translation.json, but how to load localized content when switching language?
Graphql seems providing page query, so i added gatsby-node.js:
exports.createPages = async function ({ actions, graphql }) {
actions.createPage({
path: '/zh-CN/',
component: require.resolve(`./src/pages/index.js`),
context: { lang: 'zh-CN' },
})
}
And use this on page:
export const query = graphql`
query frontpageTeaser($lang: String) {
contentfulFrontpage(node_locale: { eq: $lang }) {
myArticalContent
}
}
`
But it always returns en. Please kindly help :). Thanks.
This can be a complex switch. There is an example project that has smoothly done it with another CMS + Gatsby, here.
Specific places to point out in the codebase:
Configuration of which locales you use, here
A dynamic link depending on the active locale, here
The context for your whole app to know what the active locale is, here
Actually implementing the locale context provider in the higher order component Layout, here
There is also some magic inside of the gatsby-node.js which updates what you've already been working on! You can find that, here.
Hope that helps :)
Before getting a better solution, this one works:
// #todo gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-react-i18next/
// this plugin provides current language `context.i18n.language`, which not know how to pass it to graphql page query.
// This snippet moves it one-level up to `context.locale`.
// #todo need to explore a better solution.
exports.onCreatePage = ({ page, actions }) => {
const { createPage, deletePage } = actions
if (!page.context.locale) {
const language = page.context.i18n.language
const locale = language === 'en' ? 'en-US' : language
deletePage(page)
createPage({
...page,
context: {
...page.context,
locale,
}
})
}
}
Is it possible to tell Cypress to launch Chrome with a certain language (e.g. German) as I have an application which I need to test in multiple languages. I can't see this detailed anywhere in the documentation which suggests it is not possible at present.
I have tried adding the --lang argument when Chrome is launched but this does not seem to have any effect and Chrome still uses English. See the pluginsFile code below.
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
if (browser.name === 'chrome') {
args.push('--lang=de')
return args
}
})
}
I have also tried --lang=de-DE which also did not work.
See full example in https://glebbahmutov.com/blog/cypress-tips-and-tricks/#control-navigatorlanguage but in short
it('shows Klingon greeting', () => {
cy.visit('index.html', {
onBeforeLoad (win) {
// DOES NOT WORK
// Uncaught TypeError: Cannot assign to read only property
// 'language' of object '[object Navigator]'
// win.navigator.language = 'Klingon'
// instead we need to define a property like this
Object.defineProperty(win.navigator, 'language', {
value: 'Klingon'
})
}
})
cy.contains('#greeting', 'nuqneH').should('be.visible')
})
I had a similar problem, when launching cypress the browser would be in my default language (Dutch), while all our tests expect English to be the default. I found a question on a support-forum mentioning the parameter --lang param as well, but it had no effect on my browser's language.
In the end I could work around the problem by changing the LANG environment variable - I am using Linux. In the terminal I typed the following:
export LANG="en_EN.UTF-8"
and then I ran cypress from the same terminal.
You could script this, and for other operating systems such as MacOS and Windows there's probably a similar environment variable.
Besides adding command line options, you can also change browser preferences using Cypress' Browser Launch API (documentation). This allows you to override the Accept-Language header setting like this:
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'chromium' && browser.name !== 'electron') {
launchOptions.preferences.default.intl = { accept_languages: "nl" }
return launchOptions
}
}
Note that the launchOptions.preferences.default object may be empty, so trying to assign to launchOptions.preferences.default.intl.accept_languages directly may fail.
For one of our projects, this was enough to get the site we were testing to appear in the right language. If you need more, there are more language settings you can try altering (see Chrome's source code and look for "intl").
On a side note, it looks like the --lang command line option only works on Windows, according to Chrome's documentation. On Mac, you are required to change your system preferences, and on Linux, you can use the LANGUAGE environment variable.
cy.visit('/', {
onBeforeLoad(win: Cypress.AUTWindow) {
Object.defineProperty(win.navigator, 'language', { value: 'de-DE' });
},
});
I need to localize DatePicker. From what I read the dialog uses system locale instead of current thread locale. Is there a workaround?
As of now, my application supports three languages user can choose from (ResourceManagers in the .NETStandard project). If the device uses different language, the whole application will be in English except for DatePicker which will be in the system language.
Both of the following are acceptable solutions:
User can choose which language they wish to use throughout the lifetime of the application
Application uses the system language if it's supported, English otherwise
Edit:
Custom renderer implementation as suggested by Raimo
public class LocaleAwareDatePickerRenderer : DatePickerRenderer{
public LocaleAwareDatePickerRenderer( Context context ) : base(context) { }
protected override EditText CreateNativeControl() {
return new EditText(Context) {TextLocale = new Locale("cs"), Focusable = false, Clickable = true, Tag = this};
}
}
Use a custom DatePickerRenderer and add these two lines to set your control's Locale:
Locale locale = new Locale(LocalizationService.GetCurrentThreadCultureInfo().TwoLetterISOLanguageName);
Control.TextLocale = locale;
So I'm using a language file in Titanium to serve TSS properties I want to re-use throughout the entire app at different locations. These language file variables should be used in the themes folder (or any other TSS file for that matter).
Currently it works with a single language, but my app has multiple languages. But I don't want to duplicate the language file for all languages. Can I re-use the same file in multiple languages without having to copy the file somewhere?
Use i18n files at ISO 639-1
representation.
That files allow you have any languages and use each "labels" with Ti.Locale.getString().
Also, you can use a require of file at app.js and put this variable like global.
language.js (for example):
var language = (function() {
var self = {
currentLanguage: 'en' // by default
};
var labels = {
msgHello: {
en: 'Hello World',
es: 'Hola Mundo'
}
};
self.changeLanguage = function changeLanguage(newLanguage){
self.currentLanguage = newLanguage;
};
self.getLabel = function getLabel(key, language){
if(typeof language !== 'undefined') {
return labels[key][language];
}
else return labels[key][self.currentLanguage];
};
return self;
}());
module.exports = language;
app.js (for example):
var appLanguage = require('language.js');
(function() {
Ti.API.info("Language: "+appLanguage.currentLanguage);
Ti.API.info("MSG Hello World (English): "+appLanguage.getLabel(msgHello));
Ti.API.info("MSG Hello World (Spanish): "+appLanguage.getLabel(msgHello, es));
}());
You can use appLanguage variable directly on any file.
It appears it is not possible to reuse a language file without copying it to all languages. However, the best solution to create a global go-to for parameters to be used in TSS files is to add a section to the config.json file.
A proper way to do this is:
"global": {
"design": {
"primaryColor": "red"
}
},
This can then be used by accessing Alloy.CFG.design.primaryColor.
The benefit for using the config.json file is that you can also theme the files, as described by Fokke Zandbergen.
This way, it is even better than using language files, because those couldn't be themed.
No, but you could use default strings like:
L('my_string','my default for this string');
In this example 'my_string' is a string withing your language file. If you only provide a file for English, you'll get the default setting for all other languages.
R