Link interpolation i18n

Question

I use ember-i18n to handle multiples langages in my project, and I need to insert a link inside a translation (with interpolation).

Any idea ?

Answer 1

I face a similar problem recently and this is what I did:

Translation file (en.json) :

"some.message.key": "Successfully created <a href='{{userlink}}'> {{username}} </a>."

In the respective template/hbs file:

{{html-safe (t "some.message.key" userlink=link username=name)}}

html-safe is a helper provided by ember-cli-string-helpers add on.

Answer 2

Response from @jamesarosen on Github :

You can't use the {{link-to}} helper inside a translation because it emits a DOM node, not a String.

But you can use ember-href-to addon to generate URLs.

In JavaScript:

// some-thing/component.js:
import { hrefTo } from 'ember-href-to/helpers/href-to';

text: Ember.computed('i18n.locale', function() {
  const i18n = this.get('i18n');
  const href = hrefTo(this, 'some.route');
  const link = Ember.String.htmlSafe(`<a href="${href}">Link Text</a>`);
  return i18n.t('some.translation', { link });
})

Or in Handlebars (you'll need an htmlSafe helper):

{{t 'some.translation'
  link=(htmlSafe (join '<a href="' (href-to 'some.route') '">Link Text</a>'))}}