search

ngx-translate / i18n-polyfill

A speculative polyfill to support i18n code translations in Angular
MIT License
139 stars 30 forks source link

Interpolations usage #42

Open b627 opened 5 years ago

b627 commented 5 years ago

Hi,

I want to translate some text but i don't want to use the '{{}}' notation at the name, I mean do something like this: this.i18n('GLOBAL.ERROR.DEFAULT', {val1: variable1})

Where variable1 is a string. Here I have my messages.xlf file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="237241a7e3b70c732218ad55a56aa93fa61b0b81" datatype="html">
        <source>GLOBAL.ERROR.DEFAULT</source>
        <context-group purpose="location">
          <context context-type="sourcefile">libs/</context>
          <context context-type="linenumber">1</context>
        </context-group>
        <target>Showing dynamic value: <x id="INTERPOLATION" equiv-text="{{val1}}"/></target>
      </trans-unit>
    </body>
  </file>
</xliff>

So I want to use interpolations without define them in the source tag, but when I do that I'm receiving this error:

Error: Unknown placeholder "INTERPOLATION" ("Showing dynamic value: [ERROR ->]<x id="INTERPOLATION" equiv-text="{{val1}}"/>"): 0:23
    at TranslationBundle.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.TranslationBundle.get (ngx-translate-i18n-polyfill.js:7766)
    at Visitor$$1.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Visitor$$1.translateMessage (ngx-translate-i18n-polyfill.js:8303)
    at Visitor$$1.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Visitor$$1.visitElement (ngx-translate-i18n-polyfill.js:8190)
    at Element.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Element.visit (ngx-translate-i18n-polyfill.js:119)
    at Visitor$$1.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Visitor$$1.merge (ngx-translate-i18n-polyfill.js:8082)
    at HtmlParser.push.../../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.HtmlParser.mergeTranslations (ngx-translate-i18n-polyfill.js:7699)
    at ConsumptionPageComponent.i18n (ngx-translate-i18n-polyfill.js:8492)
    at ConsumptionPageComponent.push.../../libs/consumption/src/lib/consumption-page/consumption-page.component.ts.ConsumptionPageComponent.ngOnInit (consumption-page.component.ts:19)
    at checkAndUpdateDirectiveInline (core.js:9250)
    at checkAndUpdateNodeInline (core.js:10514)

Any ideas how can I handle this?

Regards, Benjamín

JacobSiegle commented 5 years ago

As far as I know what you're trying to do currently isn't supported by the lib. I would just append your dynamic value on after the translation.

this.i18n({ value: 'Showing dynamic value:', id: 'GLOBAL.ERROR.DEFAULT' }) + " " + variable1

albert-asin commented 4 years ago

I think I found a work arround to use interpolations @b627 in your case, try this this.i18n({ value: '[{{val1}}]', id: 'GLOBAL.ERROR.DEFAULT' }, {val1: variable1})

If you had more than one interpolation, you will have something like this this.i18n({ value: '[{{val1}},{{val2}}]', id: 'GLOBAL.ERROR.DEFAULT' }, {val1: variable1, val2: variable2})

Good Luck cheers Albert Platard